Question

实际上我真的不知道如何表达我的问题。

你可以看到我的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;
}

Answer 1

尝试这样做： https://jsfiddle.net/astm1o3p/28/

将hide()与回调函数（http://api.jquery.com/hide/#hide-duration-complete）

一起使用

$("#player-popup").hide('slow', function() {
    if ($("#player-popup span").data("playerid") != $(that).data("playerid"))
    {
        $("#player-popup span").text("Player "+$(that).data("playerid")); 
        $("#player-popup span").data("playerid", $(that).data("playerid"));
        $("#player-popup").css({ top: top, left: left }).show('slow');
    }
});

这意味着show会在隐藏结束时开始。

Answer 2

试试这个：

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条件，如果点击其他玩家，那么它会隐藏其他玩家并显示当前状态。

string

Answer 3

JSFiddle Demo

如果您在点击其他对象后再进行切换，则需要在切换之前隐藏弹出窗口。因此，您可以将先前单击的对象存储在变量中，如

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

Answer 4

只需点击即可隐藏您的工具提示。

$("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');

});

检查此工作演示 https://jsfiddle.net/astm1o3p/29/

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

4 个答案: