如何从变量创建选择器 ID

Question

在我的HTML文档中，我想有9个复选框。选中复选框后，我希望显示相应的文本块。我正在尝试为此创建一个函数，该函数使用参数来选择相应的框，但到目前为止我一直没有成功。我对jQuery的HTML完全没有经验，所以我不知道问题是什么。

我目前拥有的代码如下：

$(document).ready(function() {
for ($i = 0; $i < 9; $i++) {
$("input[name=checkbox" + $i + "]").click(function () {
$('#box' + $i).toggle();
});
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" value="alpha"> Checkbox 1 <br>
<input type="checkbox" name="checkbox2" value="beta"> Checkbox 2 <br>
<div id = "box1" style="display:none">Checkbox 1 is selected</div>
<div id = "box2" style="display:none">Checkbox 2 is selected</div>

任何人都可以帮助我理解为什么 .toggle 无法正常工作？

Answer 1

由于变量作用域在for循环中的工作方式，您的切换实际上是针对#box9，因为这是$i的最后一个值。幸运的是，在这种情况下，实际上根本不需要循环。

我们可以通过使用开始于 选择器(^=(。从那里，我们可以通过抓取它的名称并从中删除"复选框"一词来获取点击复选框的编号。

然后我们可以简单地将该数字附加到"#box"以选择要切换的相应元素。

$("input[name^=checkbox]").click(function () {
//$(this) refers to the checkbox that was clicked
var num = $(this).attr("name").replace("checkbox","");
var $box = $("#box" + num);
$box.toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" value="alpha"> Checkbox 1 <br>
<input type="checkbox" name="checkbox2" value="beta"> Checkbox 2 <br>
<div id = "box1" style="display:none">Checkbox 1 is selected</div>
<div id = "box2" style="display:none">Checkbox 2 is selected</div>

---

如果您有其他复选框，其中包含您不希望它适用于的name="checkboxX"...

。您需要将它们分成几组，最简单的方法是将类应用于所需的类即可。

<input type="checkbox" name="checkbox1" class="clickable" />
<input type="checkbox" name="checkbox2" class="clickable" />
<input type="checkbox" name="checkbox3" />

然后只需替换上面提供的代码中的选择器，以仅针对具有类clickable：

$("input[type=checkbox].clickable").click(function () {
//...
});

在此示例中，checkbox3不会触发事件，因为它没有应用类。

Answer 2

$(document).ready(function() {
$("input[type='checkbox']").click(function(){
alert("Checkbox "+$(this).index()+" is selected!");
});
});

像这样使用 for 循环是不可行的。使用"this"选择器获取当前单击的复选框，并在所有复选框上应用单击功能。

更新您正在将循环应用于 9 个复选框，这意味着您在 DOM 中添加了 9 次类似的代码，这不是必需的。 如果您不希望它们对其他复选框起作用，请将类应用于所需的复选框并按类访问。 index(".checkbox_class"( 将仅从类的复选框中为您提供复选框的索引。它不会计算<br>之间的标签:)

$(document).ready(function() {
$(".checkbox_class").click(function(){
alert("Checkbox "+$(this).index(".checkbox_class")+" is selected!");
});
});

Answer 3

我不确定问题是什么。在jQuery中，.each((是内置的，并且比for循环更好，所以让我们使用它。

$(document).ready(function() {
$("input[type=checkbox]").each(function(index) {
$("input[name=checkbox" + (index + 1) + "]").click(function() {
$("#box" + (index + 1)).toggle()
})
})
}); 

因此，让我们首先从顶部开始，我们选择所有具有复选框类型的输入，并为每个匹配的元素执行一个函数，它还为我们提供了一些"索引"从 0 开始传递并上升的数据。

然后，我们抓取所有匹配的元素，这些元素是带有复选框名称的输入，并且复选框后的数字将从 1 开始，从 2 结束，因为我们将 1 添加到索引中。 当您单击其中一个输入时，我们将调用一个新函数，该函数选择具有正确数字的框(再次使用索引 + 1，因此我们不是从 0 开始(并切换它。

Answer 4

你要找的是 jQuerythis，它可以用来点击当前元素。假设所有复选框都有类"复选框"。所有的盒子都有类"盒子"。您可以使用.index()获取点击.checkbox的索引，并找到具有相同索引的.box。然后你所要做的就是.toggle()它。

$('.checkbox').click(function() {
var index_number = $('.checkbox').index(this);
$('.box').eq(index_number).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox"> Checkbox 1<br>
<input type="checkbox" class="checkbox"> Checkbox 2<br>
<div style="display:none" class="box">Checkbox 1 is selected</div>
<div style="display:none" class="box">Checkbox 2 is selected</div>

Answer 5

For 中 I 条件的问题在于没有比较值。 确定您拥有多少的最简单方法是创建一个数组：

var
id = ['box1', 'box2'], //repeat til you get to 9
checkbox = ['checkbox1', 'checkbox2'], //repeat til you get to 9
frame = ""
;

for (i = 0; i < id.length; i++){
frame +=
"<div id=' " + box[i] + " '>"+
checkbox[i] + "is selected</div>"
;
}
document.getElementById('demo').innerHTML = frame;

然后是单独的脚本文件(因为它不能在同一个文件中工作!!(

//your toggle events here
$('#alpha').toggle(function{
$('#box1').show(0);
$('#box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9').hide(0);
});
//repeat til you get to 9

我的克隆结果经验来自小提琴： https://fiddle.jshell.net/NitroXAce/d1qro5g3/15/

因为我试图制作做某些事情但保留"模板"的面板。 在您的示例中，您只需要克隆您的输入，并且您的显示没有div。 狩猎愉快！