Question

单击选项卡（数量选项卡），我将为lablel ID生成唯一ID

对于Tab1，它是

703_KK_0_KK_0tab1
 703_KK_1_KK_0tab1

对于Tab2，它是

703_KK_0_KK_0tab2
703_KK_0_KK_0tab2

在选择/取消选中复选框时，框架分别添加一个类 ui-checkbox-on 和 ui-checkbox-off 。

我面临的问题是它无法记住选择的状态

制作方案：

点击标签1 ，选择一些复选框并导航至标签2 ，然后返回标签1 ，它无法记住选择浇头?? \

请看这个小提琴

http://jsfiddle.net/tdzfhzjy/82/

你能告诉我如何解决这个问题吗？

提前致谢。

Answer 1

我认为处理此问题的一种方法是使用sessionStorage。下面的复选框根据其ID搜索sessionStorage项目。

for (var k = 0; k < toppings.length; k++) {

    var topping_name = toppings[k].topping_name;
    var dyn_qt_val = vendoritemsid + '_KK_' + k + '_KK_' + i + 'tab' + tabnumber;

    var isChecked = false;

    var value = sessionStorage.getItem(dyn_qt_val + "_checkbox");

    //obtain checkbox checked value from session if it exist
    if ((value === "false") || (value === "true")) {
        isChecked = sessionStorage.getItem(dyn_qt_val + "_checkbox") === "true" ? true: false;
    }

    var dyn_key = $("#" + dyn_qt_val).hasClass("ui-checkbox-on");
    if (dyn_key) {
        m_class = "ui-checkbox-on";
    } else {
        m_class = "";
    }
    if (isChecked) { //checked
        toppdata += '<li><form><input type="checkbox"  name="checkbox-mini-0"  id="' + dyn_qt_val + '_checkbox" data-mini="true" checked/><label class="' + m_class + '"  id="' + dyn_qt_val + '_label"    for="' + dyn_qt_val + '_checkbox">' + topping_name + ' </label></form></li>';
    } else { //not checked
        toppdata += '<li><form><input type="checkbox"  name="checkbox-mini-0"  id="' + dyn_qt_val + '_checkbox" data-mini="true"/><label class="' + m_class + '"  id="' + dyn_qt_val + '_label"    for="' + dyn_qt_val + '_checkbox">' + topping_name + ' </label></form></li>';
    }
}

Fiddle

这些选中的值保存在onclick处理程序中以获取复选框。

$(document).on('click', '.ui-checkbox-off', function (event) {

    $(this).removeClass('ui-checkbox-off');
    $(this).addClass('ui-checkbox-on');

    //save to session storage
    sessionStorage.setItem($(this).next().attr("id"), true);  
});


$(document).on('click', '.ui-checkbox-on', function (event) {

    $(this).removeClass('ui-checkbox-on');
    $(this).addClass('ui-checkbox-off');

    //save to session storage
    sessionStorage.setItem($(this).next().attr("id"), false);

});

我希望这会有所帮助:-)顺便说一句，我注意到你使用了很多表格标签+我改变了上面的一些动态标签（复选框和标签）。

为什么jquery在一个元素上的hasClass不起作用

1 个答案: