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