Stack Overflow на русском Asked by vantal on December 15, 2020
Получилось вывести в консоль, но не получается поместить в div(желательно через запятую)
$('.calc-block').on('change', function(){
let stena = $('.calc-block input:checked + span');
stena.each(function(){
console.log($(this).attr('data-title'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
<div class="calc-block-title">Что будет на стенах?</div>
<div class="calc-block-subtitle">Выберите один или несколько пунктов</div>
<div class="calc-checkbox">
<label>
<input type="checkbox">
<span data-title="Обои">Обои</span>
</label>
<label>
<input type="checkbox">
<span data-title="Краска">Краска</span>
</label>
<label>
<input type="checkbox">
<span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span>
</label>
<label>
<input type="checkbox">
<span data-title="Фотообои">Фотообои</span>
</label>
</div>
</div>
<div class="calc-total3-1">
<div class="item">тут нужно вывести активные чекбоксы</div>
</div>
Перед циклом создать переменную - пустую строку, в цикле добавлять значение data в эту строку:
$('.calc-block').on('change', function() {
let $wall = $('.calc-block input:checked + span');
let txt = "";
$wall.each(function() {
txt += $(this).data("title") + ", ";
});
txt = txt.slice(0, -2); // Удалить последние два символа (лишние запятая и пробел)
$(this).parent().find(".calc-total3-1 .item").text( txt );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
<div class="calc-checkbox">
<label><input type="checkbox"><span data-title="Обои">Обои</span></label>
<label><input type="checkbox"><span data-title="Краска">Краска</span></label>
<label><input type="checkbox"><span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span></label>
<label><input type="checkbox"><span data-title="Фотообои">Фотообои</span></label>
</div>
</div>
<div class="calc-total3-1">
<div class="item">тут нужно вывести активные чекбоксы</div>
</div>
Хотя, у jQuery-объектов есть встроенный map, похожий на обычный Array.map()
$('.calc-block').on('change', function() {
let $wall = $('.calc-block input:checked + span');
let list = $wall.map( (i, el) => $(el).data("title") );
let txt = [].join.call(list, ", ");
$(this).parent().find(".calc-total3-1 .item").text(txt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
<div class="calc-checkbox">
<label><input type="checkbox"><span data-title="Обои">Обои</span></label>
<label><input type="checkbox"><span data-title="Краска">Краска</span></label>
<label><input type="checkbox"><span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span></label>
<label><input type="checkbox"><span data-title="Фотообои">Фотообои</span></label>
</div>
</div>
<div class="calc-total3-1">
<div class="item">тут нужно вывести активные чекбоксы</div>
</div>
[].join.call(list, ", ");
— join собирает строку из массива, Но jQuery объект (list) - не массив, у него нет такого метода. JS позволяет взять метод у одного объекта, и вызвать в контексте другого → Function.prototype.call()
Correct answer by OPTIMUS PRIME on December 15, 2020
const output = $('.item');
$('.calc-block').on('change', function() {
output.text($(':checked + span', this).map((i, el) => el.dataset.title).get().join(', '));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
<div class="calc-block-title">Что будет на стенах?</div>
<div class="calc-block-subtitle">Выберите один или несколько пунктов</div>
<div class="calc-checkbox">
<label>
<input type="checkbox">
<span data-title="Обои">Обои</span>
</label>
<label>
<input type="checkbox">
<span data-title="Краска">Краска</span>
</label>
<label>
<input type="checkbox">
<span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span>
</label>
<label>
<input type="checkbox">
<span data-title="Фотообои">Фотообои</span>
</label>
</div>
</div>
<div class="calc-total3-1">
<div class="item">тут нужно вывести активные чекбоксы</div>
</div>
Answered by Deonis on December 15, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP