Question

我有许多ID为b1，b2的按钮...每个按钮后面都有div标记，标识为q1，q2 .. 。我想在单击相应按钮时切换div标记。示例：点击b1时，q1应切换。这是在这里给出的。 http://upscfever.com/upsc-fever/en/topper/en-toppers.html

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是因为我可能有100个按钮，如果不添加每个按钮的点击，我怎么能做同样的事情呢？

Answer 1

使用属性startswith selector ^，获取id按钮并首先从中获取索引值。

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

<强>演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用解决方案

$(".info").hide();
$("button").click(function(){
  $(this).next('div.info').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
    
<div class="info">Div 1</div>
<button type="button" class="btn btn-primary btn-block">Button 2</button>
    
<div class="info">Div 2</div>

无需使用ID进行定位，您可以使用jQuery .next()

进行定位

希望这会对你有所帮助。

Answer 3

您可以将选择器从$("#b1")更改为$(".btn")，然后使用id确定要打开的q，如下所示：

$(".button").click(function(){
  if(this.id){
    $("#q"+this.id.substring(1)).toggle();
  }
});

这样，只要ID匹配

，排列HTML的方式并不重要。

＆＃13;

$(document).ready(function(){
  $(".info").hide();
  $(".btn").click(function(){
    if(this.id){
      $("#q"+this.id.substring(1)).toggle();
    }
  });
});

＆＃13;

<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">b1</button>
<button id="b2" type="button" class="btn btn-primary btn-block">b2</button>
    
<div id="q1" class="info">q1</div>
<div id="q2" class="info">q2</div>

＆＃13;

这里有JSFiddle：https://jsfiddle.net/py8q340p/

Answer 4

使用额外的变量状态来检查你的状态，并且第一次只有你的第一个div被切换，以便两个div被切换。

<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">Toggle Divs</button>
    
<div id="q1" class="info">Hello div 1</div>
<div id="q2" class="info">Hello div 2</div>

^5(0[5-7]|[3-5]\d) \d{3} \d{4}$

点击按钮切换div标签

4 个答案: