Question

向HTML元素添加其他数据有什么好的模式？例如，我想在取消选中复选框时将复选框链接到我想要隐藏的HTML。就像for元素的label属性一样，我想在标记中指定链接，这样我就可以编写一个简单的通用脚本来迭代所有复选框并挂钩一个jquery事件处理程序来进行隐藏/示出

。

例如，在此HTML中：

<input type="checkbox" id="showFoo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

让我的脚本知道#showFoo与#foo有关，这有什么好处？理想情况下，某些内容不会使我的HTML无法验证，也不会要求我对ID使用特定的命名约定。额外的功劳，如果它使我的脚本更有效。

Answer 1

使用data-[key]属性来标识#showFoo应控制的内容

example jsfiddle

HTML：

<input type="checkbox" id="showFoo" data-toggles="foo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

jQuery的：

$('#showFoo').change(function() {
    $('#' + $(this).data('toggles')).toggle();
});

Answer 2

这似乎是数据元素的完美案例。

<input type="checkbox" id="showFoo" data-relateddiv="foo" />

然后在复选框上的事件处理程序中：

$('#' + $(this).data("relateddiv")).show();

Answer 3

您可以使用“rel”属性

<input type="checkbox" id="showFoo" rel="foo" />

$('#showFoo').click(function(){
  var element_id = $(this).attr('rel');
  var element = $('#'+element_id);
  if(element.is(':hidden')){
    element.slideDown();
    //element.show();
  }
  else{
    element.slideUp();
    //element.hide();
  }
});

Answer 4

我目前使用此

element.each(function(i, e) {  
            var checked = $(e).prop('checked'),
                foo = */Relationship betweeen element and foo*/;
            foo .toggleClass('invisibleClass', checked)
                .toggleClass('visibleClass', !checked);
        });

如果你有多个foos和元素（你必须先定义它们之间的关系）

根据您选择的事件运行

Answer 5

尝试以下

if (checkboxIsChecked) {
foo.visibility:visible;
} else {
foo.visibility:hidden;
}

当复选框未选中时，将HTML复选框与元素链接以隐藏

5 个答案: