0

我在同一页面上有 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>
4

3 回答 3

0

使用this关键字：

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

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

附言

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

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

希望能帮助到你。

问候。

于 2013-01-04T08:50:12.220 回答
0

试试这个：

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

于 2013-01-04T08:51:11.960 回答
0

您可以将 javascript 函数内联添加到您的 html 中，或者this以如下方式使用运算符：

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

$(function(){
  $('.zoom_Out').click(function(){
    $(this).css({"display":"none"});
  });
});
于 2013-01-04T08:52:19.030 回答