Javascript 在jquery函数中添加ID或类似的类？

我在同一页上有20个按钮，可以用onClick打开不同的图像。按钮使用相同的样式且为div-class。每个按钮由2个绝对定位按钮组成，单击时通过显示无/块更改位置。为此，我使用jQuery

问题是，我只希望jQuery函数在单击的按钮上工作，而不是同时在其他19个按钮上工作。名称或ID或其他解决方案可以解决此问题吗

代码如下：

$(function(){
  $('.zoom_In').click(function(){
    $(".zoom_Out").css({"display":"block"});
  });
});

$(function(){
  $('.zoom_Out').click(function(){
    $(".zoom_Out").css({"display":"none"});
  });
});

---

使用

此

关键字：

$(function(){
  $('.zoom_Out').click(function(){
    $(this).css({"display":"none"});
  });
});

我想这就是你想要实现的

附言

您还可以使用jQuery内置的show/hide方法来帮助自己（编写更短的代码）。像这样：

$(function(){
  $('.zoom_Out').click(function(){
    $(this).hide();
  });
});

希望能有帮助

问候。

试试这个：

$(function(){
  $('.zoom_In').click(function(){
    $(this).next().css({"display":"block"}); // Show the button next to the clicked button.
  });
  $('.zoom_Out').click(function(){
    $(this).css({"display":"none"}); // Hide the clicked button.
  });
});

---

此外，不需要将两个侦听器分配包装在单独的

$（function（）{}）中

您可以将javascript函数内联添加到html中，或者使用

此

运算符，以便：

$(function(){
  $('.zoom_In').click(function(){
    $(this).css({"display":"block"});
  });
});

$(function(){
  $('.zoom_Out').click(function(){
    $(this).css({"display":"none"});
  });
});

---

此

将引用事件处理程序中的当前元素。我建议您阅读。对于所有答案，您的第一个函数不应应用于

此

Thx，但在测试后，没有一个有效。我认为这个问题被误解了-$（this）解决方案看起来不错，但第一个函数必须同时做两件事：1。将“缩小”显示从无更改为块+2。在页面上只选择一对所有按钮，但我可以看到您想要的位置it@KennethHayes有什么不管用的？什么是它不应该做的，ot没有做它应该做的？这个解决方案打破了原始代码的功能：改变“缩小”的显示-如果你能测试发布的代码，你就会明白我的意思。但是无论如何，thx对于发布抱歉的Cerburs-您当前的解决方案是100%正确的！我是新加入这个论坛的-有点困惑-但是你救了我一天-泰克斯-阿加因塞布鲁斯-你太棒了！再一次

$(function(){
  $('.zoom_In').click(function(){
    $(this).next().css({"display":"block"}); // Show the button next to the clicked button.
  });
  $('.zoom_Out').click(function(){
    $(this).css({"display":"none"}); // Hide the clicked button.
  });
});

$(function(){
  $('.zoom_In').click(function(){
    $(this).css({"display":"block"});
  });
});

$(function(){
  $('.zoom_Out').click(function(){
    $(this).css({"display":"none"});
  });
});