jQuery中的数据属性隐藏和显示函数语法

在使用jQuery操作DOM元素中，我们常常需要对元素进行显示或隐藏的操作。jQuery提供了show()和hide()方法来实现元素的显示和隐藏，但它们只能对元素的display属性进行设置。

jQuery还提供了一种通过数据属性来控制元素显示与隐藏的方法，即使用data属性和toggle()方法组合实现元素的显示和隐藏。

数据属性

通过给元素添加data属性，可以给元素赋予任意的数据。在操作元素时，可以通过读取或设置元素的data属性来获取或修改元素的数据。

<div data-name="Tom">Hello World!</div>
<script>
    var name = $('div').data('name');
    console.log(name); // 输出: Tom
</script>

toggle()方法

toggle()方法用于切换元素的显示状态，如果元素已经显示，则隐藏该元素；如果元素已经隐藏，则显示该元素。

<button id="toggle-button">Toggle</button>
<div id="toggle-div">Hello World!</div>
<script>
    $('#toggle-button').click(function() {
        $('#toggle-div').toggle();
    });
</script>

使用数据属性和toggle()方法实现的隐藏和显示

针对一些数据场景下，我们可以把对显示和隐藏的控制权交给数据属性。通过设置元素的data属性控制元素的显示和隐藏，就可以在不改变元素display属性的情况下实现元素的显示和隐藏。

<button id="toggle-button">Toggle</button>
<div id="toggle-div" data-toggle="true">Hello World!</div>
<script>
    $('#toggle-button').click(function() {
        var toggle = $('#toggle-div').data('toggle');
        $('#toggle-div').data('toggle', !toggle);
        $('#toggle-div').toggle(toggle);
    });
</script>

在上述例子中，我们给元素设置了一个data-toggle属性，并初始化为true。在点击按钮时，通过获取元素的data-toggle属性来控制元素的显示和隐藏，每次切换时还需要修改data-toggle的属性值。

以上方法可以在一些数据操作特别频繁的场景下使用，避免频繁修改元素的display属性带来的性能问题。

参考链接：

• jQuery hide() Method
• jQuery show() Method
• jQuery toggle() Method