jQuery Toggle Show/Hide w/Multiple DIV ID's答案

【问题标题】：jQuery Toggle Show/Hide w/Multiple DIV ID'sjQuery Toggle Show/Hide w/Multiple DIV ID's
【发布时间】：2010-01-17 19:05:29
【问题描述】：

代码：

$(document).ready(function() {

    $('.toggle').hide();

    $('.show').click(function(){

        $('.toggle').toggle('slow'); 

        $(this).attr('src','images/checkmark2.jpg');

    },function(){

        $('.toggle').toggle('slow'); 

        $(this).attr('src', 'images/checkmark1.jpg');

        return false;
    });
});

HTML：

<img class="show" src="images/checkmark1.jpg"/>Header Text

当您单击 checkmark1.jpg 图像时，隐藏文本位于 div 类“切换”中。使用多个“切换” div 类，它们会同时展开。

当脚本和 HTML 中的“toggle”设置为 ID # 时，它们会独立扩展（如我所愿），但您不能始终使用相同的 DIV ID # 名称。那么我将如何更改代码以使用多个切换 DIV ID；或使用不会同时扩展每个类的“切换”类???

这里是我的代码的直接链接。 http://www.flipflopmedia.com/test/ToggleTEST_html.txt 当我尝试插入它时，它正在被渲染而不是显示，因此您可以实际看到它。是的，我正在使用代码按钮“在此处输入代码”来应用它，但不起作用！

【问题讨论】：

发布您的 HTML 以获得更好的答案。
对不起，它不会让我 :( 我在下面有示例页面，但我必须“回答我自己的问题”，因为我对每个人的回复都有太多字符。显然我不明白这个论坛，比我做的jQuery更好。啤酒时间！
flipflopmedia：这不是论坛。如果您有更新，则需要编辑您的问题。
编辑我的问题！？该死！谢谢你。我怎么没想到。从现在开始会做！

标签： jquery animation html

【解决方案1】：

由于您没有提供任何可以使用的 HTML，我将一些与有效的脚本放在一起

HTML

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 1</span>
 <div class="toggle">This is some hidden text #1</div>

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 2</span>
 <div class="toggle">This is some hidden text #2</div>

脚本（已更新以使用您的 HTML）

$(document).ready(function(){
 $('.toggle').hide();
 $('.show').click(function(){
  var t = $(this);
  // toggle hidden div
  t.next().next().toggle('slow', function(){
   // determine which image to use if hidden div is hidden after the toggling is done
   var imgsrc = ($(this).is(':hidden')) ? 'images/checkmark1.jpg' : 'images/checkmark2.jpg';
   // update image src
   t.attr('src', imgsrc );
  });
 })
})

【讨论】：

完全复制了这个，我得到了和我已经得到的完全相同的结果。单击单个图像时，它们都会展开/收缩。
我不知道你在做什么有什么不同，但我在这里 (pastebin.me/7c6962d7e70c49f97237cd465e26fb09) 发布了我的脚本演示，让你看看它确实有效。
我更新了我的脚本以使用您提供的 HTML。基本上，我让它在没有 div 包裹每个块的情况下工作。
这简直太棒了！你的演示有效！ Unflippin'可信！好的，我必须用我自己的图像和文本来实现它。谢谢谢谢谢谢谢谢谢谢！！！一千次！单击时图像会发生变化，并且只会触发相关的 div；如果这是有道理的，那就太美了。我已经尝试了整整 4 天了！
我认为您使用的是 jQuery 1.3.1，而我使用的是 1.2.3。仍然有效，但我应该使用您正在使用的包吗？这是完美的，就像一个魅力！：）谢谢！问题解决了！下一个？哈哈！现在我可以继续我的余生了！ :)

【解决方案2】：

“点击”功能只允许您添加一个功能（当您单击所选元素时触发的功能）。但你通过它两个。您可能想改用“切换”功能。有关更多信息，请参阅此问题：

jQuery Toggle State

【讨论】：

toggle 是原来的用法，我把它改成了 click 因为它用在一个类似的脚本中。无论哪种方式都没有区别。结果相同。

【解决方案3】：

同时使用 ID 和类：

<p id="myP1" class="toggle">Hello World</p>

当你需要具体处理时：

$("#myP1").toggle();

当您想与其他人一起处理时：

$(".toggle").hide();

【讨论】：

试过了，没用。或者也许我没有正确应用它。我将有 10 多个隐藏的 div，需要通过每个旁边的图像专门调用它们。我是否在脚本中插入这一行，给每个人一个唯一的 ID，然后相应地更新代码？我有前任。我在上面的第二篇文章中的页面。
它不允许我添加代码。我在这里有示例页面：flipflopmedia.com/test/ToggleTEST.html flipflopmedia.com/test/ToggleTEST2.html
flipflopmedia.com/test/ToggleNEW2.html 发现这个脚本可以正常工作，正确交换图像和 div，但它使用切换方法，我想使用切换。不确定将它应用到这个脚本是否更容易或可能，看到它已经在工作......只需要它来切换。
触发器，不知道你的 HTML 我无法评论。对不起。
这里是，flipflopmedia.com/test/ToggleTEST_html.txt 在这个页面上使用：flipflopmedia.com/test/ToggleTEST.html 这是代码：flipflopmedia.com/test/ToggleTEST2_html.txt 在这个页面上使用：flipflopmedia.com/test/ToggleTEST2.html 我已经尝试了很多次，直接在这里添加我的代码，但它正在渲染它而不是将其设置为纯文本，以便你们都可以看到它！对不起！！

【解决方案4】：

您希望能够派生元素的 id，以从被单击元素的属性中切换。换句话说，仅基于被单击元素的属性中包含的信息，您就可以构造要切换的元素的 id（和/或类）。

可能将元素的 id 与 onclick 处理程序关联到要切换的元素的 id。例如，如果您单击一个 id="checkmark1" 的 img 并使被切换的元素具有 id="checkmark1_content"，那么您的点击处理程序可以是：

$('#' + this.id + '_content').toggle();

类将用于切换多个（或几个）元素：

$('.' + this.id + '_content').toggle();

根据以下 cmets 中提供的测试用例，解决方案如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Toggle Test
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('.toggle').hide();
        $('img').attr('src','images/checkmark1.jpg');
        $('.toggler').click( function() {
          var target = this.id + '_content';
          // Use ID-selectors to toggle a single element.
          $('#' + target).toggle();
          // Use class-selectors to toggle groups of elements.
          $('.' + target).toggle();
          $('.toggle.always').toggle();
        });
        $('#toggle_everything').click( function() { $('.toggle').toggle(); });
    });
    //]]></script>
  </head>
  <body>
    <div class="toggler" id="toggle1"><img/>Toggle 1</div>
    <div class="toggler" id="toggle2"><img/>Toggle 2</div>
    <div class="toggler" id="toggle3"><img/>Toggle 3</div>
    <div id="toggle_everything"><img/>Toggle Everything</div>
    <hr/>
    <div class="toggle" id="toggle1_content">only toggle1</div>
    <div class="toggle" id="toggle2_content">only toggle2</div>
    <div class="toggle" id="toggle3_content">only toggle3</div>
    <div class="toggle always">always toggled</div>
    <div class="toggle toggle1_content toggle2_content">toggle1 and toggle2</div>
    <div class="toggle toggle1_content toggle3_content">toggle1 and toggle3</div>
    <div class="toggle toggle2_content toggle3_content">toggle2 and toggle3</div>
    <div class="toggle toggle1_content toggle2_content toggle3_content">toggle1, toggle2 and toggle3</div>
  </body>
</html>

【讨论】：

这是有道理的，但我无法将其正确应用到脚本中以使其工作！！我一定做错了什么。这就是我要找的。脚本中的一个简单行将告诉它是否将 XXX 附加到 id 名称，然后展开/隐藏那个。请你再帮我一些忙。我的测试页面在这里：flipflopmedia.com/test/ToggleTEST.html 这些是原始页面，没有你建议的应用。谢谢，特蕾西

【解决方案5】：

问题出在这里：

$('.toggle').toggle('slow');

这段代码当然会用class="toggle"切换所有HTML元素。

根据您的 HTML 结构，改为执行以下操作：

$(function() {
 $('.toggle').hide();
 $('.show').click(function() {
  $(this).next('.toggle').toggle('slow'); 
  $(this).attr('src', 'images/checkmark2.jpg');
  return false;
 }, function() {
  $(this).next('.toggle').toggle('slow'); 
  $(this).attr('src', 'images/checkmark1.jpg');
  return false;
 });
});

【讨论】：

完全复制了这个，现在只改变了一次图像，并没有恢复到原来的状态；和 div（无）展开。