javascript - how to toggle the same object for different object? -
actually dont know how express problem.
you can see fiddle come know problem.
as can see in fiddle when clicking on first image pop appears when clicking on other image popup hides ..i know togggling effect to if want when click on second image first toggle should on other should start?
my code
<div id='player-back'> <img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/> <img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/> <img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/> <div id='player-popup' style="display:none"> <span>player1</span> </div> </div> $("img").click(function(){ var top = $(this).offset().top + $(this).width() + 2; var left = $(this).offset().left - $(this).height() / 2; $("#player-popup span").text("player "+$(this).data("playerid")); $("#player-popup").css({ top: top, left: left }).toggle('slow'); }); #player-back{ height:250px; background:#0f0; } #p1{ margin-top:50px; margin-left:80px; } #p2{ margin-left:150px; } #p3{ margin-left:200px; } #player-popup{ background:orange; height:27px; width:85px; border-radius:10px; text-align:center; position:absolute; }
you need hide popup before toggle in case when clicking other object after one. can store clicked object in variable like
var prevobj = null; $("img").click(function(){ var top = $(this).offset().top + $(this).width() + 2; var left = $(this).offset().left - $(this).height() / 2; $("#player-popup span").text("player "+$(this).data("playerid")); if(prevobj != this) $("#player-popup").hide(); $("#player-popup").css({ top: top, left: left }).toggle('slow'); prevobj = this; });
Comments
Post a Comment