javascript - 从 jQuery 中的数组填充复选框和标签属性

Question

我试图实现一些我可以从特定数组填充 4 个复选框和标签的几个属性。我不想附加整个标记。我将所有内容都保留在标记上，然后需要根据选择菜单选择来感受属性。

var _select = $('#opt');
var _container = $('#teams');

var FF1 = [{
        display: "Week 1",
        value: "Week-1"
    },
    {
        display: "Week 2",
        value: "Week-2"
    },
    {
        display: "Week 3",
        value: "Week-3"
    },
    {
        display: "Week 4",
        value: "Week-4"
    }
];

var FF2 = [{
        display: "Week 5",
        value: "Week-5"
    },
    {
        display: "Week 6",
        value: "Week-6"
    },
    {
        display: "Week 7",
        value: "Week-7"
    },
    {
        display: "Week 8",
        value: "Week-8"
    }
];


_select.on('change', function() {
    var parent = $(this).val();
    _container.removeClass('is-hidden');

    switch (parent) {
        case 'FF1':
            weekList(FF1);
            break;
        case 'FF2':
            weekList(FF2);
            break;
        default:
            break;
    }

});

function weekList(array_list) {
    $(array_list).each(function(i) {
        console.log(array_list[i]);

    });
}

.is-hidden {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="opt">
	<option value="">Select Option</option>
  	<option value="FF1">FF1</option>
  	<option value="FF2">FF2</option>
</select>

<div id="teams" class="is-hidden">
    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck1" id="" />
        <label for="" class="lb1"></label>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck2" id="" />
        <label for="" class="lb2"></label>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck3" id="" />
        <label for="" class="lb3"></label>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="teams" class="ck4" id="" />
        <label for="" class="lb4"></label>
    </div>
</div>

有人可以帮我吗？

提前致谢!

干杯!

Answer 1

下面的代码可能会有帮助，只需替换函数 weekList() 中的循环即可。

$(array_list).each(function (i) {
    var Id = (i + 1)
    $('.ck' + Id).val(array_list[i].value);  // update checkbox values
    $('.ck' + Id).attr("id", ("ck"+ Id));    // update checkbox id
    $('.lb' + Id).text(array_list[i].display)// update label text
    $('.lb' + Id).attr("for",("ck"+ Id))     // update label for text
});