Question

CODE：

$(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类“切换”中。使用多个“toggle”div类，它们都会立即扩展。

当在脚本和HTML中将“toggle”设置为ID＃时，它们会独立扩展（按照我的意愿），但您不能在整个过程中使用相同的DIV ID＃Name。那么我将如何更改代码以使用多个切换DIV ID;或使用“切换”一次不扩展的类???

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

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

Answer 2

“单击”功能仅允许您添加一个功能（单击所选元素时触发的功能）。但是你把它传给了两个。您可能希望使用“切换”功能。有关详细信息，请参阅此问题：

jQuery Toggle State

Answer 3

同时使用ID和类：

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

当你需要专门处理它时：

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

当你想用其余的处理它时：

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

Answer 4

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

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

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

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

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

根据以下评论中提供的测试用例，以下是解决方案：

<!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>

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

jQuery Toggle显示/隐藏w /多个DIV ID

5 个答案: