Question

对于基于按钮和p标签中的类的简单切换，我是否每次都必须重复脚本？我是JS的新手，并试图学习这一点。下面的代码示例！

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $(".but1").click(function(){
        $(".type1").toggle();
    });
});
</script>
<script>
$(document).ready(function(){
    $(".but2").click(function(){
        $(".type2").toggle();
    });
});
</script>
</head>
<body>

<button class="but1">button1</button>
<button class="but2">button2</button>

<p class="type1">#1</p>
<p class="type2">#2</p>

</body>
</html>

Answer 1

如果您遵循DRY原则，那么您可以使用button元素上的公共类来附加事件处理程序，并在每个元素上单独设置data*属性以指定元素应该切换，像这样：

$(document).ready(function() {
  $(".but").click(function() {
    $("." + $(this).data('target')).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="but" data-target="type1">button1</button>
<button class="but" data-target="type2">button2</button>

<p class="type1">#1</p>
<p class="type2">#2</p>

或者，您可以按索引设置关系。这意味着您不必更改HTML，但更容易破碎。

$(document).ready(function() {
  $('.but').click(function() {
    $('.type').eq($(this).index('.but')).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="but">button1</button>
<button class="but">button2</button>

<p class="type">#1</p>
<p class="type">#2</p>

Answer 2

简单示例：

function toggle(id){
   $(".type_"+id).toggle();
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>

<button onclick="toggle('1')">button1</button>
<button onclick="toggle('2')">button2</button>

<p class="type_1">#1</p>
<p class="type_2">#2</p>

</body>
</html>

JQuery切换：为不同的类重复完整的脚本？

2 个答案: