Question

这是我的标记：

<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工具提示的代码（工具提示有id：“＃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-classes似乎都是独立运行脚本的。我的意思是，如果我点击第一行中的tips_trigger，它会显示工具提示。如果我直接点击第二行中的tips_trigger，它会再次显示工具提示。我必须点击完全相同的tips_trigger-class istance两次才能隐藏它。我怎样才能克服这个问题呢？ 2.每个“..._ trigger”类都有一个工具提示，而不仅仅是“.tips_trigger”。有没有办法改变我当前的脚本，以便它适用于多个取消隐藏/隐藏而不是每个类编写一个脚本？

亲切的问候，
的Marius

Answer 1

目前还不完全清楚你想要什么，但这是一个修改过的例子（我认为）解决了你的两个问题：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();
});

Answer 2

处理多个工具提示的一个优雅解决方案是这样的：

将工具提示触发器修改为： <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>
将工具提示修改为：

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

将您的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; });

这就是我可能没有遇到任何语法错误或其他错误的本质。这解决了你的问题。

Answer 3

我使用了来自Charlie Brown，Mukund和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();
});

该脚本已经过测试并且运行良好，但我们非常感谢任何进一步的建议。

Answer 4

我有类似的问题。当点击两个不同元素中的任何一个时，我想在div上调用slideDown（）。

我所做的是在其中一个元素上创建slideDown（）函数，然后在单击第二个元素时触发第一个元素上的click事件。

类似的东西：

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

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

希望有所帮助！

Answer 5

$('a.tips_trigger').click(function(event){
    event.preventDefault();
    if ($('#message_tips').css('display') == 'block'){
        $('#message_tips').hide();
    }
    else {
        $('#message_tips').show();  
    }
});

jQuery：.toggle（）在两个不同的元素上无法正常工作

5 个答案: