在各个 div 上使用 jquery 切换

发布于 2024-10-01 02:51:51 字数 873 浏览 1 评论 0原文

我正在尝试使用 + 和 - 框创建切换效果来显示和隐藏 div。示例 http://theodin.co.uk/tools/tutorials/jqueryTutorial/index .html

这是我正在使用的脚本

$(function(){
        $('.block').hide();
            $('#show').toggle(function(){
                    $('.block').show(); 
                    $(this).attr("src","images/minus.jpg" );
            },function(){
                $('.block').hide(); 
                $(this).attr("src", "images/plus.jpg" );
            });
    });

HTML

<div id="show"> Open <img id="show" src="images/plus.jpg"/> </div>
    <div class="block"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>

它适用于一个 div，但我有多个，当我单击一个时，它们都会显示。有没有办法使用我拥有的代码单独切换它们？

原文

I'm trying to create a toggle effect using + and - boxes for showing and hiding divs. And example http://theodin.co.uk/tools/tutorials/jqueryTutorial/index.html

This is the script I'm using

$(function(){
        $('.block').hide();
            $('#show').toggle(function(){
                    $('.block').show(); 
                    $(this).attr("src","images/minus.jpg" );
            },function(){
                $('.block').hide(); 
                $(this).attr("src", "images/plus.jpg" );
            });
    });

The HTML

<div id="show"> Open <img id="show" src="images/plus.jpg"/> </div>
    <div class="block"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>

It works fine with one div but I have multiple and when I click one, they all show. Is there a way to toggle them individually using the code I have?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空名 2024-10-08 02:51:51

将 show ID 更改为 class，如下所示：

<div class="show"> Open <img src="images/plus.jpg" /> </div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>  

<div class="show"> Open <img src="images/plus.jpg" /> </div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

然后 jQuery 变为：

$('.show').toggle(function(){
  $(this).next('.block').show(); 
  $(this).children("img").attr("src","images/minus.jpg" );
},function(){
  $(this).next('.block').hide(); 
  $(this).children("img").attr("src", "images/plus.jpg" );
});

这是一个例子。

Change the show ID to a class like this:

<div class="show"> Open <img src="images/plus.jpg" /> </div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>  

<div class="show"> Open <img src="images/plus.jpg" /> </div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Then the jQuery becomes:

$('.show').toggle(function(){
  $(this).next('.block').show(); 
  $(this).children("img").attr("src","images/minus.jpg" );
},function(){
  $(this).next('.block').hide(); 
  $(this).children("img").attr("src", "images/plus.jpg" );
});

Here's an example.

回复收藏 0 原文

不离久伴 2024-10-08 02:51:51

您正在更改 #show 元素的 src，而您应该在其子上更改它。

$(function() {
    $('.block').hide();
    $('#show').toggle(function(){
         $('.block').show(); 
         $(this).children('img').attr("src","images/minus.jpg" );
    },function(){
         $('.block').hide(); 
         $(this).children('img').attr("src", "images/plus.jpg" );
    });
});

这使用 .children() 获取子元素，以便您可以更改其源。

此外，与其父级具有相同的 ID。这是不允许的。 ID 必须是唯一的。

You're changing the src of the #show element, when you should be changing it on its child <img>.

$(function() {
    $('.block').hide();
    $('#show').toggle(function(){
         $('.block').show(); 
         $(this).children('img').attr("src","images/minus.jpg" );
    },function(){
         $('.block').hide(); 
         $(this).children('img').attr("src", "images/plus.jpg" );
    });
});

This uses .children() to get the child <img> element so you can change its source.

Also, the <img> has the same ID as its parent. This is not allowed. IDs must be unique.

回复收藏 0 原文

~没有更多了~