Question

我是j查询的新手，我想使用数据（数据类）属性切换div而不是使用div的单独类名...请帮助我...提前感谢

<div id="click" class="toggle">Toggle </div>
<div id="slide" data-class="slide" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div class="toggle">Toggle </div>
<div data-class="slide1" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div class="toggle">Toggle </div>
<div data-class="slide2" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<script>
        $(document).ready(function(){
    $( ".toggle" ).click(function() {
        var tog = $(this).("data-class");
    $("."+tog).slideToggle( "fast", function() {
      // Animation complete.
    });
  });

  });

</script>

Answer 1

您可以使用attr()或data()获取数据属性的值，以便使用：

var tog = $(this).attr("data-class");

或：

var tog = $(this).data("class");

而不是：

var tog = $(this).("data-class");

完成HTML标记后，您需要将HTML更改为：

<div id="click" data-class="slide" class="toggle">Toggle</div>
<div class="slide" id="slide" data-class="slide" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div data-class="slide1" class="toggle">Toggle</div>
<div class="slide1" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>
<div data-class="slide2" class="toggle">Toggle</div>
<div class="slide2" style="display:none;">
    <p>name 1</p>
    <p>name 2</p>
    <p>name 3</p>
</div>

您需要在data-class div上添加.toggle属性，而不是隐藏的div。此外，您还需要为隐藏的div添加class。

<强> Fiddle Demo

Answer 2

您应该使用.attr('data-class')或.data('class'); ..

这是您更新的代码：

  $(document).ready(function(){
     $( ".toggle" ).click(function() {
         $(this).children(':first').slideToggle( "fast", function() {
             // Animation complete.
         });
      });
  });

如何使用data（data-class）属性</div>切换<div>

2 个答案: