Jquery асоциативный многоуровневый массив

266
02 августа 2017, 21:04

Есть вот такой html

<label for="val-1" class="m-r-sm">
    <input type="checkbox" name="attributes" value="1" data-attribute-name="size" id="val-1" class="js-product-attributes" >10
</label>
<label for="val-2" class="m-r-sm">
    <input type="checkbox" name="attributes" value="2" data-attribute-name="color" id="val-2" class="js-product-attributes" >Red
</label>

Таких чекбоксов n-ное количество

и вот такой js код

        var $combination = {};
        $('.js-product-attributes:checked').each(function (i, el) {
            $combination[$(el).data('attribute-name')] = {};
        });
        console.log($combination);

В итоге получаю

Object {Size: Object, Color: Object}
    Color: Object
    Size:Object
    __proto__: Object

Сам вопрос, как элементы этого обьекта добавить массив значений выделенных чекбоксов у которых data-attribute-name соответствует названию элемента в обьекте. Тоесть к Object.color добавить все выделенные чекбоксы у которых data-attribute-name="color". Спасибо!

Answer 1

Так?

var $combination = {}; 
$('.js-product-attributes').each(function (i, el) { 
    $combination[$(el).data('attribute-name')] = {}; 
}); 
function PuchCheck(){ 
    let color = $('.js-product-attributes[data-attribute-name = color]:checked'), 
        size = $('.js-product-attributes[data-attribute-name = size]:checked'); 
    $combination.color = color; 
    $combination.size = size; 
    console.log($combination.color.length+' '+$combination.size.length); 
    $($combination.color).parent().css({'color':'red'}); 
    $($combination.size).parent().css({'color':'blue'}); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label for="val-1" class="m-r-sm"> 
    <input type="checkbox" name="attributes" value="1" data-attribute-name="size" id="val-1" class="js-product-attributes" >10 
</label> 
<label for="val-2" class="m-r-sm"> 
    <input type="checkbox" name="attributes" value="2" data-attribute-name="color" id="val-2" class="js-product-attributes" >Red 
</label> 
<label for="val-3" class="m-r-sm"> 
    <input type="checkbox" name="attributes" value="2" data-attribute-name="color" id="val-3" class="js-product-attributes" >Grey 
</label> 
<label for="val-4" class="m-r-sm"> 
    <input type="checkbox" name="attributes" value="2" data-attribute-name="color" id="val-4" class="js-product-attributes" >Green 
</label> 
<button onclick="PuchCheck()">Push</button>

READ ALSO
Событие Click не срабатывает на тачскрине
jQuery

Событие Click не срабатывает на тачскрине

Допустим некий код, который при клике на выбранный оптион выполняет функциюНа компе всё работает, на таскринах при выборе option, removeclass не срабатывает

 293
Убрать класс active в jQuery
jQuery

Убрать класс active в jQuery

При нажатии на "Итем2" и после этого при нажатии на "Итем1" - получается, что оба item'a имеют класс active и они начинают неадекватно себя вести

 307
заменить input text на textarea
jQuery

заменить input text на textarea

У меня есть множество полей ввода input text, которые я хочу заменять на textarea если человек входит с телефонаКак заменить я знаю, но как в замененную...

 276
Расширение для Chrome, ошибка с обработчиком событий
jQuery

Расширение для Chrome, ошибка с обработчиком событий

У меня есть расширение для хрома (уже опубликовано), но есть проблемаВ окне расширения (popup

 339