Javascript 在按钮上切换div标记单击

我有许多id为b1、b2的按钮。。。每个都有一个

div

标签，后面是id

q1

，

q2

。。。 我想在单击相应按钮时切换

div

标记示例：单击

b1

时，应切换

q1

。 这里给出了它

$（文档）.ready（函数（）{
$（“.info”）.hide（）；
$（“#b1”）。单击（函数（）{
$（“#q1”）.toggle（）；
});
});

使用属性STARTS和选择器
^
，首先获取按钮的
id
，然后从中获取索引值

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

演示


$（文档）.ready（函数（）{
$（“.info”）.hide（）；
$（“[id^='b']”。单击（函数（）{
var index=this.id.match（/\d+$/）[0]；
$（“#q”+索引）.toggle（）；
});
});

按钮1
信息1
按钮2
信息2
按钮3
信息3
按钮4
Info4
使用属性STARTS和选择器
^
，首先获取按钮的
id
，然后从中获取索引值

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

演示


$（文档）.ready（函数（）{
$（“.info”）.hide（）；
$（“[id^='b']”。单击（函数（）{
var index=this.id.match（/\d+$/）[0]；
$（“#q”+索引）.toggle（）；
});
});

按钮1
信息1
按钮2
信息2
按钮3
信息3
按钮4
Info4
这是一个解决方案


$（“.info”）.hide（）；
$（“按钮”）。单击（函数（）{
$（this.next（'div.info'）.toggle（）；
});

按钮1
第一组
按钮2
Div 2
这是一个解决方案


$（“.info”）.hide（）；
$（“按钮”）。单击（函数（）{
$（this.next（'div.info'）.toggle（）；
});

按钮1
第一组
按钮2
Div 2
使用一个额外的变量状态来检查您的状态，并且第一次只切换第一个Div，之后两个Div都被切换


$（文档）.ready（函数（）{
var状态=0；
$（“.info”）.hide（）；
$（“#b1”）。单击（函数（）{
如果（状态==0）{
$（'#q1'）.toggle（）；
状态=1；
}
否则{
$（“#q1”）.toggle（）；
$（'#q2'）。切换（）；
}
});
});

切换Divs
你好，第一组
Hello div 2
使用一个额外的变量状态来检查您的状态，并且第一次只切换第一个div，之后两个div都被切换


$（文档）.ready（函数（）{
var状态=0；
$（“.info”）.hide（）；
$（“#b1”）。单击（函数（）{
如果（状态==0）{
$（'#q1'）.toggle（）；
状态=1；
}
否则{
$（“#q1”）.toggle（）；
$（'#q2'）。切换（）；
}
});
});

切换Divs
你好，第一组
Hello div 2
您可以将选择器从
$（“#b1”）
更改为类似
$（“.btn”）
，然后使用
id
确定要打开的
q
，如下所示：

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

这样，只要ID匹配，如何安排HTML就无关紧要了


$（文档）.ready（函数（）{
$（“.info”）.hide（）；
$（“.btn”）。单击（函数（）{
if（this.id）{
$（“#q”+this.id.substring（1））.toggle（）；
}
});
});

b1
b2
q1
q2
您可以将选择器从
$（“#b1”）
更改为类似
$（“.btn”）
，然后使用
id
确定要打开的
q
，如下所示：

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

这样，只要ID匹配，如何安排HTML就无关紧要了


$（文档）.ready（函数（）{
$（“.info”）.hide（）；
$（“.btn”）。单击（函数（）{
if（this.id）{
$（“#q”+this.id.substring（1））.toggle（）；
}
});
});

b1
b2
q1
q2
$（'.btn'）。在（'click'，function（）{$（this）.next（）.toggle（）；}）上每个div是否直接位于相应按钮之后？两者之间没有任何元素？是的，两者之间没有任何元素。这和我刚才提到的一样above@UncaughtTypeError你的代码正在运行。我的疑问是，我是否需要向按钮添加id以及向div标记添加id/class。不，这是不必要的，我会添加一个唯一的类，尽管您可以将其用作此功能的选择器。
$（'.btn'）。on（'click'，function（）{$（this）.next（）.toggle（）；}）每个div是否直接位于相应按钮之后？两者之间没有任何元素？是的，两者之间没有任何元素。这和我刚才提到的一样above@UncaughtTypeError你的代码正在运行。我的疑问是，我是否需要将id添加到按钮以及id/class添加到div标记。不，这是不必要的，我会添加一个唯一的类，尽管您可以将其用作此功能的选择器。为什么要复制id？还有，请解释一下你做了什么，而不仅仅是“给你”@j08691复制
id
s是一个错误，我已经相应地更新了答案。你为什么复制id？另外，关于你做了什么而不是仅仅“给你”的解释如何？@j08691复制
id
s是一个错误，我已经相应地更新了答案。