jquery将事件绑定到多个按钮

Question

我是jQuery的新手并且正在努力解决以下问题：

我有6个terraform apply，所有人都有＆＃39; +＆＃39;图标。当您点击一个buttons时，系统会显示一些内容，并且会显示＆＃39; +＆＃39;图标将变为＆＃39; - ＆＃39;图标。点击相同的按钮后，相应的内容应该会消失，这就是＆＃39; - ＆＃39;图标应该变回＆＃39; +＆＃39;图标。

当内容A打开并且您点击另一个button时，内容A应该消失，内容B应该显示。当然，对＆＃39; +＆＃39;采取相同的行动。和＆＃39; - ＆＃39;图标。到目前为止，我有这个代码，它工作得很好。我知道你可以用更短的方式编写这段代码，但我的问题是如何？

到目前为止我的代码：

＆＃13;

＆＃13;

button

＆＃13;

＆＃13;

＆＃13;

HTML的一部分：

＆＃13;

＆＃13;

// Button One
$(".btnOne").click(function() {
    var value = $(".btnOne").text();
    if(value === "-") {
        $(".btnOne").text("+");
        $(".contentOne").hide(300);
    }
    else {
        $(".btnOne").text("-");
        $(".btnTwo, .btnThree, .btnFour, .btnFive, .btnSix").text("+");    
        // Show/Hide Content
        $(".contentOne").show(300);
        $(".contentTwo, .contentThree, .contentFour, .contentFive, .contentSix").hide(300);
    }
});

// Button Two
$(".btnTwo").click(function() {
    var value = $(".btnTwo").text();
    if(value === "-") {
        $(".btnTwo").text("+");
        $(".contentTwo").hide(300);
    }
    else {
        $(".btnTwo").text("-");
        $(".btnOne, .btnThree, .btnFour, .btnFive, .btnSix").text("+");    
        // Show/Hide Content
        $(".contentTwo").show(300);
        $(".contentOne, .contentThree, .contentFour, .contentFive, .contentSix").hide(300);
    }
});

// Button Three
$(".btnThree").click(function() {
    var value = $(".btnThree").text();
    if(value === "-") {
        $(".btnThree").text("+");
        $(".contentThree").hide(300);
    }
    else {
        $(".btnThree").text("-");
        $(".btnOne, .btnTwo, .btnFour, .btnFive, .btnSix").text("+");    
        // Show/Hide Content
        $(".contentThree").show(300);
        $(".contentOne, .contentTwo, .contentFour, .contentFive, .contentSix").hide(300);
    }
});

// Button Four
$(".btnFour").click(function() {
    var value = $(".btnFour").text();
    if(value === "-") {
        $(".btnFour").text("+");
        $(".contentFour").hide(300);
    }
    else {
        $(".btnFour").text("-");
        $(".btnOne, .btnTwo, .btnThree, .btnFive, .btnSix").text("+");    
        // Show/Hide Content
        $(".contentFour").show(300);
        $(".contentOne, .contentTwo, .contentThree, .contentFive, .contentSix").hide(300);
    }
});

// Button Five
$(".btnFive").click(function() {
    var value = $(".btnFive").text();
    if(value === "-") {
        $(".btnFive").text("+");
        $(".contentFive").hide(300);
    }
    else {
        $(".btnFive").text("-");
        $(".btnOne, .btnTwo, .btnThree, .btnFour, .btnSix").text("+");    
        // Show/Hide Content
        $(".contentFive").show(300);
        $(".contentOne, .contentTwo, .contentThree, .contentFour, .contentSix").hide(300);
    }
});

// Button Six
$(".btnSix").click(function() {
    var value = $(".btnSix").text();
    if(value === "-") {
        $(".btnSix").text("+");
        $(".contentSix").hide(300);
    }
    else {
        $(".btnSix").text("-");
        $(".btnOne, .btnTwo, .btnThree, .btnFour, .btnFive").text("+");    
        // Show/Hide Content
        $(".contentSix").show(300);
        $(".contentOne, .contentTwo, .contentThree, .contentFour, .contentFive").hide(300);
    }
});

＆＃13;

＆＃13;

＆＃13;

非常感谢任何帮助！

Answer 1

为<button>和目标元素分配一个公共类，并使用公共类将事件处理程序附加到它们。

在事件处理程序中使用当前元素上下文，即this，并使用自定义data-*属性保留选择器目标，该属性可以使用.data(key)方法获取

＆＃13;

＆＃13;

$(".btns").click(function() {
  var value = $(this).text();
  var target = $($(this).data('target'))
  if (value === "-") {
    $(this).text("+");
    target.hide(300);
  } else {
    $(this).text("-");
    $(".btns").not(this).text("+");

    // Show/Hide Content
    target.show(300);
    $(".content").not(target).hide(300);
  }
});

＆＃13;

.content {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Nav Buttons -->
<nav>
  <div class="btns" title="Button One" data-target=".contentOne">+</div>
  <div class="btns" title="Button Two" data-target=".contentTwo">+</div>
  <div class="btns" title="Button Three" data-target=".contentThree">+</div>
</nav>

<!-- Content -->
<article class="dynamicContent">
  <section class="content contentOne">
    <p>Content 1</p>
  </section>
  <section class="content contentTwo">
    <p>Content 2</p>
  </section>
  <section class="content contentThree">
    <p>Content 3</p>
  </section>
</article>

＆＃13;

＆＃13;

＆＃13;