请看这个小提琴http://jsfiddle.net/philphil/q71tys4g/1/
我想做的事情类似于将 JQuery脚本中的cascade1
替换为从 HTML 中读取data-cascade
中的值的变量
我现在.cascade1
在我的 jquery 脚本input:checkbox.cascade1
的选择器中进行了硬编码,但我希望动态地拥有该值(' cascade1')根据 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);
}
});
答案 0 :(得分:0)
如果我理解你要做什么,你想根据附加到另一个元素的数据选择一个元素。
假设您有以下内容:
<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);
});
});
答案 1 :(得分:0)
这就是我最终要做的事情。
$('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);
}
});