Javascript 如何为不同的对象切换相同的对象？

事实上，我真的不知道如何表达我的问题

你们可以看到我的答案，这样你们就会了解这个问题

正如您在fiddle中看到的，当我单击第一个图像时，弹出窗口会出现，但当我单击另一个图像时，弹出窗口会隐藏。我知道这是切换效果，但当我单击第二个图像时，如果我想切换什么，那么第一个切换应该切换，而不是其他应该启动

我的代码

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

玩家1
$（“img”）。单击（函数（）{
var top=$（this.offset（）.top+$（this.width（）+2；
var left=$（this.offset（）.left-$（this.height（）/2；
$（“#播放器弹出span”）.text（“播放器”+$（此）.data（“playerid”）；
$（“#播放器弹出”）.css（{top:top，left:left}）.toggle（'slow'）；
});
#球员后卫{
高度：250px；
背景：#0F0；
}
#p1{
边缘顶部：50px；
左边距：80px；
}
#p2{
左边距：150像素；
}
#p3{
左边距：200px；
}
#播放器弹出窗口{
背景：橙色；
高度：27px；
宽度：85px；
边界半径：10px；
文本对齐：居中；
位置：绝对位置；
}

尝试执行以下操作：

将

hide（）

与回调函数（）一起使用

这意味着显示将在隐藏结束时开始。

尝试以下操作：

var playerId = '';
$("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(playerId !=$(this).data("playerid") && $("#player-popup").css('display') != 'none'){
        $("#player-popup").css('display','none');
        playerId = $(this).data("playerid");
    }
    $("#player-popup").css({ top: top, left: left }).toggle('slow');

});

我已经添加了一个if条件，如果在不同的玩家上有点击，那么它将隐藏其他玩家并显示当前玩家

---

.

只需在单击时首先隐藏工具提示

$("img").click(function(){
    $("#player-popup").hide();
    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');

});

检查此工作演示

您需要在切换之前隐藏弹出窗口，以防在一个对象之后单击其他对象。所以您可以将以前单击的对象存储在变量中，如

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

---

我编辑了链接，但当你查看代码时，你会发现，首先它会隐藏这个弹出窗口，无论它是否可见，然后设置位置并显示在这个新位置，并使用我所说的新文本，当你点击播放器图像时，它会显示一个弹出窗口，当你再次点击它时，它应该隐藏，但它会隐藏，但再次显示OK，我现在明白了。检查已编辑的代码。只需在弹出窗口中存储额外数据，还有其他方法代替隐藏和显示吗？这是我关心的问题。你的问题得到了多方面的正确回答。你应该不厌其烦地接受合适的一个：）在你的演示中，同样的事情正在发生，当我第二次单击图像时，它被隐藏并再次弹出。根据我的理解，你想要这种效果。第一个工具提示应该隐藏，然后下一个应该可见。是的，但它应该像切换一样工作，即当我第一次单击图像时弹出窗口应该出现，当我单击同一图像时弹出窗口应该消失。这不是你的情况。我希望你明白我的意思

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