jQuery: .toggle () не работает должным образом на двух разных элементах - PullRequest
Новая
       18

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

0 голосов
/ 30 марта 2010

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

<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. Кажется, что каждый из классов tips_trigger работает независимо от сценария. Под этим я подразумеваю, что если щелкнуть tips_trigger в первом ряду, отобразится подсказка. Если я сразу после этого щелкну tips_trigger во втором ряду, всплывающая подсказка снова отобразится. Мне нужно дважды щелкнуть один и тот же istance tips_trigger-class, чтобы скрыть его. Как я могу преодолеть эту проблему?
2. Каждый из классов "..._ trigger" будет иметь всплывающую подсказку, а не просто ".tips_trigger". Есть ли способ изменить мой текущий сценарий так, чтобы он работал для нескольких шкур / скрытий вместо написания одного сценария на класс?

С уважением,
Marius

Ответы [ 5 ]

2 голосов
/ 30 марта 2010

Не совсем понятно, чего вы хотите, но вот модифицированный пример, который (я думаю) исправляет ваши две проблемы: 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();
});
0 голосов
/ 02 мая 2013

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

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

как то так: 

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

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

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

0 голосов
/ 31 марта 2010

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

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

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

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

0 голосов
/ 30 марта 2010

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

  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() {<br> var target = $(this).attr('href');<br> var tooltip_state = 0;<br> if(tooltip_state) { $(".tooltip_content").css("display", "none"); }<br> $(target).css("display", "block");<br> tooltip_state = 1; return false; });

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

0 голосов
/ 30 марта 2010 
$('a.tips_trigger').click(function(event){
    event.preventDefault();
    if ($('#message_tips').css('display') == 'block'){
        $('#message_tips').hide();
    }
    else {
        $('#message_tips').show();  
    }
});
...