Question

我有以下jQuery代码：

jQuery("#box1").focusin(function() {
   jQuery(".grid_location1").show();
   }).focusout(function () {
   jQuery(".grid_location1").hide();
});

jQuery("#box2").focusin(function() {
   jQuery(".grid_location2").show();
   }).focusout(function () {
   jQuery(".grid_location2").hide();
});

HTML

    <input type="text" name="homepage_grid_box_1[box1]" class="box" id="box1"> 

    <div class="grid_location grid_location1"> </div>

对于我在页面上拥有的每个ID（即有15个）重复此操作。我觉得这不是解决该问题的正确方法，而必须有一个更有效的方法。我不确定带有计数器的循环是否可以正常工作并且可以通过，但是它没有工作。有什么想法吗？

Answer 1

您最好放弃使用增量ID值，例如“ box1”，“ box2”，...

代替使用类“ box”，并将其分配给这15个box1，box2，... box15。

出于相同的原因，应避免使用诸如“ grid_location1”，“ grid_location2”之类的增量类。只需将它们称为“ grid_location”即可。使用它们的位置的上下文应该足以隔离与某个box元素相关的那些。

要么box元素包含相应的“ grid_location”元素，要么您应该创建具有特定类（“ container”）的容器元素（如span）都包含一个“框”元素和一个相应的“ grid_location”元素。

现在，您已经向问题中添加了HTML，很明显，这些元素没有共同的父元素，而是同级元素。您可以按如下所示使其与.next()一起使用：

jQuery(".box").focusin(function() {
    jQuery($(this).next()).show();
}).focusout(function () {
    jQuery($(this).next()).hide();
});

一种更可靠的方法是添加容器元素（带有“ container”类），如下所示：

<span class="container">
    <input type="text" name="homepage_grid_box_1[box1]" class="box"> 
    <div class="grid_location"> </div>
</span>

然后执行：

jQuery(".box").focusin(function() {
    jQuery(".grid_location", $(this).closest(".container")).show();
}).focusout(function () {
    jQuery(".grid_location", $(this).closest(".container")).hide();
});

Answer 2

您可以使用逗号分隔的ID

jQuery("#box1, #box2, #box3").focusin(function() {
 jQuery(".grid_location1").show();
 }).focusout(function () {
 jQuery(".grid_location1").hide();
});

如何在多个ID jQuery上运行相同的函数（但类会更改）

2 个答案: