Question

当用户点击切换按钮时，我有很多div可以隐藏/显示。我的切换按钮正在工作，但编写代码有一个更短的方法吗？应该是，当点击lblBtn1时，只会dtxt1滑动，如果点击lblBtn2，则会显示dtxt2。

    $(document).ready(function(){
      $("#lblBtn1").click(function(){
      $("#dtxt1").slideToggle();
      });
      $("#lblBtn2").click(function(){
      $("#dtxt2").slideToggle();
      });
   });

HTML

<lbl id="lblBtn1">&#43;</lbl>Menu1 
    <div id="dtxt1">ASDFGH</div>

<lbl id="lblBtn2">&#43;</lbl>Menu2 
    <div id="dtxt2">QWERTY</div>

Answer 1

试试这个：

// Shorter $(document).ready
$(function () {
    // Use attribute selector for both of your #id because they are like each other..
    $("[id^=lblBtn]").click(function () { // or $("#lblBtn1, #lblBtn2").click(function () { 
        // Use next function to find next div to slideToggle because they are next to each other (siblings)
        $(this).next('div').slideToggle();
    });
});

Answer 2

您可以使用id start with selector或tagname selector来定位$(this).next()的所有标签元素，以定位所需的div元素：

$("[id^=lblBtn]").click(function(){//or $("lbl").click(function(){
   $(this).next().slideToggle();
});

<强> working Demo

Answer 3

$('[id^="lblBtn"]').click(function(){
    $(this).next().slideToggle();
});

这适用于所有标签

或尝试点击<lbl>代码

上的活动

Answer 4

这将定位所需的#dtxt，即使它不直接位于#lblBtn旁边

$('[id^=lblBtn]').click(function() {
    var num = $(this).attr('id').replace('lblBtn', '');
    $('[id=dtxt' + num + ']').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<lbl id="lblBtn1">&#43;</lbl>Menu1 
    <div id="dtxt1">ASDFGH</div>

<lbl id="lblBtn2">&#43;</lbl>Menu2 
    <div id="dtxt2">QWERTY</div>

切换许多div id

4 个答案: