简体   繁体   中英

Add ID or similar to class in jquery-function?

I have 20 buttons on same page which opens different images with onClick. Buttons use same styling and are div-class.Each button is made out of 2 absolute positioned buttons which changes position by display none / block when clicked. For this I'm using jQuery.

Problem is that I only want the jQuery-function to work on the button clicked and not the 19 other buttons at the same time. Can name or ID or other solution solve this?

Here's the code:

$(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>

Use this keyword:

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

I assume this is what you want to achieve.

PS

You can also use jQuery's built in show/hide methods to help yourself out (write shorter code). Like this:

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

Hope it helps.

Regards.

Try this:

$(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

Also, there's no need to wrap both listener assignments in a separate $(function(){});

You could add a javascript function inline to your html or use this operator in such a way that:

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM