jQuery:.toggle()在两个不同的元素上无法正常工作 [英] jQuery: .toggle() doesnt work properly on two different elements

问题描述

这是我的标记

<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"都会有一个工具提示.

This is my code to hide/unhide tooltip for .tips_trigger (the tooltip has id: "#message_tips"). Notice that there is one .tips_trigger on each row in the table. And there will be one tooltip per "..._trigger-class".

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

我有两个问题:
1.每个tips_trigger-classs似乎都可以独立运行脚本.我的意思是，如果我单击第一行中的tips_trigger，它将显示工具提示.如果我紧接着单击第二行中的tips_trigger，它将再次显示工具提示.我必须单击完全相同的tips_trigger-class等距两次，才能将其隐藏.我该如何克服这个问题?
2.每个"..._ trigger"类都有一个工具提示，而不仅仅是".tips_trigger".有没有一种方法可以更改我当前的脚本，使其可以用于多个取消隐藏/隐藏操作，而不是为每个类编写一个脚本?

I have two problems:
1. Each of the tips_trigger-classes seems to work the script independatly. What I mean by that is if I click tips_trigger in the first row, it displays the tool-tip. If i click tips_trigger in the second row straight after, it displays the tool-tip again. I have to click the exact same tips_trigger-class istance twice for it to hide it. How can I overcome this problem?
2. Each of the "..._trigger"-classes will have a tool-tip, not just ".tips_trigger". Is there a way to alter my current script so that it works for multiple unhides/hides instead of writing one script per class?

亲切的问候，
马吕斯

Kind regards,
Marius

推荐答案

我使用了来自Charlie Brown，Mukund和bcherry的输入:

I used input from: Charlie Brown, Mukund and bcherry to make this:

标记触发器:

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

该脚本已经过测试，可以很好地工作，但我们欢迎您提出任何其他建议.

The script is tested and works well, but any further suggestions are appreciated.

这篇关于jQuery:.toggle()在两个不同的元素上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！