1

向 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 使用特定的命名约定。如果它使我的脚本更有效率，那就加分。

4

5 回答 5

2

使用data-[key]属性来确定#showFoo应该控制什么

示例 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();
});
于 2012-01-24T17:48:48.527 回答
1

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

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

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

$('#' + $(this).data("relateddiv")).show();
于 2012-01-24T17:46:05.033 回答
0

您可以使用“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();
  }
});
于 2012-01-24T17:49:27.587 回答
0

我目前使用这个

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

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

在您选择的事件上运行它

于 2012-01-24T17:57:21.010 回答
-1

试试下面

if (checkboxIsChecked) {
foo.visibility:visible;
} else {
foo.visibility:hidden;
}
于 2012-01-24T17:47:30.773 回答