更新

Question

请看这个小提琴http://jsfiddle.net/philphil/q71tys4g/1/

我想做的事情类似于将 JQuery脚本中的cascade1替换为从 HTML 中读取data-cascade中的值的变量

我现在.cascade1在我的 jquery 脚本input:checkbox.cascade1的选择器中进行了硬编码，但我希望动态地拥有该值（＆＃39; cascade1＆＃39;）根据 HTML 元素data-cascade=cascade1中的内容加载。这样我的页面就会正确地级联cascade1和cascade2复选框。

我希望有一种简单的方法可以使用data("cascade")来实现，但我无法找到它。

HTML

<div class="grades">
    cascade1 <input type="checkbox" data-cascade="cascade1" value="1" />
    cascade2 <input type="checkbox" data-cascade="cascade2" />
    1 <input class="cascade1" type="checkbox" />
    1 <input class="cascade1" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    1 <input class="cascade1" type="checkbox"  />
</div>

JS

$('input:checkbox[data-cascade]').change(function() {
    if($(this).prop('checked') === true) {
        $('input:checkbox.cascade1').prop('checked', true);
    } else {
        $('input:checkbox.cascade1').prop('checked', false);
    }
});

Answer 1

如果我理解你要做什么，你想根据附加到另一个元素的数据选择一个元素。

假设您有以下内容：

<div id='someDiv' data-cascadeId='myCascadeElement'>content</div>
<div id='#myCascadeElement'>such cascade wow</div>

您可以检索此值并使用它来查询dom，如下所示：

$(function() {
    var selector = $('#someDiv')[0].dataset.cascadeId;
    $(selector).css('background-color', 'yellow');
})

这有帮助，还是不是你问的？

更新

这些应该是您正在寻找的结果。

HTML：

<div class="grades">
    cascade1 <input type="checkbox" data-cascade="cascade1" value="1" />
    cascade2 <input type="checkbox" data-cascade="cascade2" />
    1 <input class="cascade1" type="checkbox" />
    1 <input class="cascade1" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    1 <input class="cascade1" type="checkbox"  />
</div>

JS：

$(function() {
    $('input:checkbox[data-cascade]').change(function() {
        var selector = $(this).data('cascade'),
            isChecked = $(this).prop('checked');
        $('.'+selector).prop('checked', isChecked);
    });
});

Answer 2

这就是我最终要做的事情。

$('input:checkbox[data-cascade]').change(function() {
    var selector = $(this).data("cascade");

    if($(this).prop('checked') === true) {
        $('input:checkbox.'+selector).prop('checked', true);
    } else {
        $('input:checkbox.'+selector).prop('checked', false);
    }
});

来自数据属性的jquery动态选择器

2 个答案:

更新