Question

如果可以在我的页面上有多个切换按钮而不必为每个按钮（具有不同的id）重复jQuery .toggleClass代码，那么可以尝试解决这个问题吗？也许使用'this'或其他方法？

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle('fast');
    });
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<button>Toggle</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
  
<button>Toggle</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>

提前致谢！

Answer 1

切换你需要使用的下一个p .next（）

$(document).ready(function(){
    $("button").click(function(){
        $(this).next('p').fadeToggle('fast');
    });
});

要切换下一个p和下一个p，您需要使用.next（）

$(document).ready(function(){
        $("button").click(function(){
            $(this).next('p').fadeToggle('fast');
            $(this).next().next().fadeToggle('fast');
        });
    });

您可以选择

等按钮ID

 $("#button1, #button2").click();

我不喜欢你的html结构..如果你可以将每个按钮及其P放在一个div中，那么处理它会更好

Answer 2

您可以使用事件委派。

例如，如果将click事件绑定到按钮。我认为您可以使用 id或数据属性来区分触发的按钮。然后你可以继续前进。

Answer 3

$（function（）{ $（＆＃39; #toggle-event1，＃toggle-event2，＃toggle-event3，＃toggle-event4，＃toggle-event5＆＃39;）。change（function（）{ 让state1 = $（this）.prop（＆＃39; checked＆＃39;）; // alert（＆＃34; .toggle（）的第一个处理程序调用。＆＃34;）;

                  alert(this.id);})

多个切换按钮，1个jQuery代码

3 个答案: