javascript - 单击按钮时切换 div 标签

Question

我有许多 ID 为 b1、b2 的按钮……每个按钮后面都有一个 ID 为 q1 的 div 标签, q2...我想在单击相应按钮时切换 div 标签。 示例: 当单击 b1 时，q1 应该切换。它在这里给出。 http://upscfever.com/upsc-fever/en/topper/en-toppers.html

$(document).ready(function(){
  $(".info").hide();
  $("#b1").click(function(){
    $("#q1").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block"></button>
    
<div id="q1" class="info"></div>

但由于我可能有 100 个按钮，我怎样才能在不点击每个按钮的情况下做同样的事情呢？

Answer 1

使用attribute startswith selector ^，获取按钮的id，并先从中获取索引值。

$("[id^='b']").click(function(){
    var index = this.id.match(/\d+$/)[0];
    $("#q" + index ).toggle();
});

演示

$(document).ready(function() {
  $(".info").hide();
  $("[id^='b']").click(function() {
    var index = this.id.match(/\d+$/)[0];
    $("#q" + index).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">Button1</button>
<div id="q1" class="info">Info1</div>

<button id="b2" type="button" class="btn btn-primary btn-block">Button2</button>
<div id="q2" class="info">Info2</div>

<button id="b3" type="button" class="btn btn-primary btn-block">Button3</button>
<div id="q3" class="info">Info3</div>

<button id="b4" type="button" class="btn btn-primary btn-block">Button4</button>
<div id="q4" class="info">Info4</div>