Question

我在同一页面上有20个按钮，用onClick打开不同的图像。按钮使用相同的样式并且是div级。每个按钮由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"});
  });
});

.links {
    float: left;
    width: 88%;
    height: auto;
    margin: 1%;
    padding: 4%;
    border: 2px solid #900;
    background: #FFF;
    cursor: pointer; 
    text-align: left;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #999;
}
#zoomBtn_wrap  {
    position: relative;
    float: right;
    width: 28%;
    height: auto;
    margin: 0 20% 0 0;
    padding: 0;
}
.zoom_In {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #CCC;
    cursor: pointer;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 100%;
}
.zoom_In:hover  {
    border: 2px solid #999;
    background: #FFF;
    color: #000;
}
.zoom_Out {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #CCC;
    cursor: pointer;

    display: none;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 100%;
}
.zoom_Out:hover  {
    border: 2px solid #999;
    background: #FFF;
    color: #000;
}

<div class="links"> 
      <div id="zoomBtn_wrap">
          <input name="" type="button" id="" class="zoom_In" onClick="" title="" value="Show" />

           <input name="" type="button" id="" class="zoom_Out" onClick="" title="" value="Hide" />                
      </div> <!--End of zoomBtn_wrap-->
</div>

<div class="links">                
      <div id="zoomBtn_wrap">
                <input name="" type="button" id="" class="zoom_In" onClick="" title="" value="Show" />

                 <input name="" type="button" id="" class="zoom_Out" onClick="" title="" value="Hide" />                
      </div> <!--End of zoomBtn_wrap-->
</div>

Answer 1

使用this关键字：

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

我认为这是你想要实现的目标。

P.S。

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

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

希望它有所帮助。

问候。

Answer 2

试试这个：

$(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.
  });
});

<强> Working Sample

此外，无需在单独的$(function(){});

中包含两个侦听器分配

Answer 3

你可以在你的html中添加内联的javascript函数，或者使用this运算符：

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

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

在jquery-function中添加ID或类似的类？

3 个答案: