Как переключить один и тот же объект для другого объекта?

на самом деле я действительно не знаю, как выразить свою проблему.Как переключить один и тот же объект для другого объекта?

вы можете увидеть мой 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; 
}

источник

2015-05-14 Bhavik Joshi

Есть ли какой-либо другой способ вместо игры скрыть и показать? это мое беспокойство. –

На ваш вопрос правильно ответил несколько. Вы должны потрудиться, чтобы принять подходящий :) – Sami

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

источник

2015-05-14 13:39:11 Sami

Попробуйте сделать это: 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'); 
    } 
});

Это означает, что шоу начинается, когда скрыть концы.

источник

2015-05-14 07:38:42 suvroc

, но он никогда не скроет элемент. –

Я редактирую ссылку, но когда вы смотрите на код, вы видите, что сначала она скрывает это всплывающее окно всякий раз, когда оно видимо или нет, а затем устанавливают позицию и показать в этой новой позиции и с новым текстом – suvroc

Я говорю о том, когда вы нажмете на изображение игрока, он покажет вам всплывающее окно, когда вы нажмете его снова, он должен скрыть, но он скрывается, но снова показывает –

Попробуйте это:

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

});

Я добавил, если условие, если будет нажать на другом плеере, то он будет скрывать другой и покажет ток.

Working Demo.

источник

2015-05-14 07:42:48 FatalError

Просто скройте подсказку сначала при нажатии.

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

источник

2015-05-14 08:00:15

в вашей демонстрации, то же самое происходит, когда я нажимаю на изображение во второй раз, когда он скрывается и снова появляется. –

Вы хотели этот эффект в соответствии с моим пониманием. Первая подсказка должна скрываться, а затем следующая должна быть видимой. –

да, но он должен работать, как переключить i.e, когда я нажимаю на изображение в первый раз, когда появляется всплывающее окно, и когда я нажимаю на одно и то же изображение, всплывающее окно должно исчезнуть. Это не в вашем случае. Надеюсь, вы получаете мою точку –

Как переключить один и тот же объект для другого объекта?

ответ

Смежные вопросы