jQuery: .toggle() не работает должным образом с двумя разными элементами

Это моя разметка:

<table class="col1table" cellspacing="0" cellpadding="0">
   <tr>
      <td><a class="tips_trigger" href="#"><img src="/img/design/icon_tips_venn.png" /></a></td>
      <td><a class="facebook_trigger" href="#"><img src="/img/design/icon_facebook.png" /></a></td>
      <td><a class="twitter_trigger" href="#"><img src="/img/design/icon_twitter.png" /></a></td>
      <td><a class="myspace_trigger" href="#"><img src="/img/design/icon_myspace.png" /></a></td>
   </tr>
   <tr>
      <td><a class="tips_trigger" href="#">TIPS EN VENN</a></td>
      <td><a class="facebook_trigger" href="#">FACEBOOK</a></td>
      <td><a class="twitter_trigger" href="#">TWITTER</a></td>
      <td><a class="myspace_trigger" href="#">MYSPACE</a></td>
   </tr>
</table>

Это разметка для всплывающей подсказки:

<div id="message_tips" class="toolTip">Lorem ipsum dolor sit amet.<br /><br /><br /><br /><br /><br />Lorem ipsum dolor sit amet.</div>

Это мой код для скрытия/отображения всплывающей подсказки для .tips_trigger (всплывающая подсказка имеет идентификатор: "#message_tips"). Обратите внимание, что в каждой строке таблицы есть один .tips_trigger. И будет одна всплывающая подсказка для каждого "..._trigger-class".

$('.tips_trigger').toggle(function(event){
  event.preventDefault();
    $('#message_tips').css('display', 'block');
  }, function(event){
    $('#message_tips').css('display', 'none');
});

У меня две проблемы:
1. Кажется, что каждый из классов tip_trigger работает со сценарием независимо. Под этим я подразумеваю, что если я нажму tip_trigger в первой строке, он отобразит всплывающую подсказку. Если я нажму tip_trigger во второй строке сразу после этого, он снова отобразит всплывающую подсказку. Мне нужно дважды щелкнуть одно и то же значение tip_trigger-class, чтобы скрыть его. Как я могу решить эту проблему?
2. Каждый из классов "..._trigger" будет иметь всплывающую подсказку, а не только ".tips_trigger". Есть ли способ изменить мой текущий скрипт, чтобы он работал для нескольких показов/скрытий вместо того, чтобы писать один скрипт для каждого класса?

С уважением,
Мариус


toggle jquery tooltip
person Marius    schedule 30.03.2010    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Не совсем понятно, чего вы хотите, но вот модифицированный пример, который (я думаю) устраняет ваши две проблемы: http://www.jsfiddle.net/fSrLz/

Вы не должны использовать функцию .toggle() для своих обработчиков кликов, вместо этого вы должны использовать ее для функций отображения/скрытия. Чтобы применить ко всем, вы можете либо сделать $(".tips_trigger, .facebook_trigger, etc...'), либо использовать более причудливый селектор, такой как $("[class$=_trigger") (это означает выбрать все, чей атрибут класса заканчивается на «_trigger»).

Вот JS из того примера, который я изменил:

$('[class$=_trigger]').click(function (event) {
    event.preventDefault();
    $('#message_tips').toggle();
});
person bcherry    schedule 30.03.2010
comment
гораздо более гибкий, чем мой ответ, хорошо - person Charlie Brown; 30.03.2010

arrow_upward
0
arrow_downward

Одним из элегантных решений для обработки нескольких всплывающих подсказок было бы что-то вроде этого:

  1. Измените триггеры всплывающей подсказки на что-то вроде:
    <li><a href="#tooltip_type2" class="tooltip-trigger">Type 1 triggger</a></li>
    <li><a href="#tooltip_type2" class="tooltip-trigger">Type 2 trigger</a></li>

  2. Измените всплывающие подсказки на что-то вроде:

<div id="tooltip_type1" class="tooltip_content">Content for type 1</div>
<div id="tooltip_type1" class="tooltip_content">Content for type 2</div>

  1. Измените свой JavaScript на:
    $(".tooltip_trigger").click(function() {
    var target = $(this).attr('href');
    var tooltip_state = 0;
    if(tooltip_state) { $(".tooltip_content").css("display", "none"); }
    $(target).css("display", "block");
    tooltip_state = 1; return false; });

В этом суть. Я не беспокоюсь о каких-либо синтаксисе или других ошибках, которые я мог сделать. Это решает обе ваши проблемы.

person Mukund    schedule 30.03.2010

arrow_upward
0
arrow_downward

Я использовал информацию от: Чарли Брауна, Мукунда и bcherry, чтобы сделать это:

Триггеры разметки:

<td><a class="tooltrigger" href="#tip1"><img src="/img/design/icon_tips_venn.png" /></a></td>
<td><a class="tooltrigger" href="#tip2"><img src="/img/design/icon_facebook.png" /></a></td>

Подсказки по разметке:

<div id="tip1" class="tooltip">Lorem Ipsum Donor ist.<br /><br /><br /><br /><br /><br />Lorem Ipsum Donor ist.</div>
<div id="tip2" class="tooltip">Facebook Lorem Ipsum Donor ist.<br /><br /><br /><br /><br /><br />Facebook Lorem Ipsum Donor ist.</div>

Скрипт:

$('.tooltrigger').click(function(event){
     event.preventDefault();
     $(
          '.tooltip' + $(this).attr('href')
     ).toggle().siblings().hide();
});

Сценарий протестирован и работает хорошо, но любые дальнейшие предложения приветствуются.

person Marius    schedule 30.03.2010

arrow_upward
0
arrow_downward

У меня была похожая проблема. Я хотел вызвать slideDown() в div, когда был нажат любой из двух разных элементов.

Что я сделал, так это сделал функцию slideDown() для одного из элементов, а затем инициировал событие click для первого элемента, когда вы щелкаете по второму элементу.

что-то вроде этого:

$('#gallery_toggle').toggle(function() {
    $('#gallery_slide').slideDown();
}, function() {
    $('#gallery_slide').slideUp();
});

$('#another_gallery_toggle').click(function(){
    $('#gallery_toggle').trigger('click');
});

Надеюсь, это поможет!

person brendan_boxclever    schedule 01.05.2013