jQuery切换有关状态的更改图片 [英] jquery toggle change image regarding status

问题描述

我正在使用jquery切换来隐藏一些内容，如果用户希望查看，则可以展开"这些内容.这是它的jsFiddle:

I'm using jquery toggle to hide some content, which the user can "unfold" if he/she wants to see it. Here's a jsFiddle of it:

http://jsfiddle.net/yjs2P/

使用此代码:

$.noConflict();
function toggleDiv(divId) {
   jQuery("#"+divId).toggle($);
}

如您所见，第一个元素已经用关闭"图像(红色)打开，其他两个元素已用打开"图像(橙色)关闭".

As you can see the first element is already opened with a "close"-image (red), two other elements are "closed" with "open"-images (orange).

现在，我要实现的是，如果用户单击其中一张图像，则所有切换元素都将关闭，而与点击相关的元素将被打开.当元素打开时，图像应更改为其他状态，因此，如果元素已关闭(橙色)，则图像也应更改为打开(红色)，反之亦然.

Now I want to achieve that if the user clicks on one of the images, all toggle-elements get closed and the click-related element gets opened. When the element is opened the image should change to the other state, so if it's closed (orange) the image should be changed to open (red) and the other way round, too.

任何人都可以向我提供有关此问题的任何提示吗?

Can anyone provide me any hints to this issue?

提前加油！

推荐答案

好吧-首先让您对html进行一些更改.

Ok how about this - first lets make a few changes to your html.

不使用id而是使用类名进行引用的思想.因此，对于每个内容div，我添加了一个 news-content 类

Lets not use id's but instead get into the mindset of referencing by class name. So for each of the content div's I added a news-content class

...
<div class="news-content" id="myContent">
...
<div class="news-content" id="myContent2">
...
<div class="news-content" id="myContent3">
...

接下来，让我们从超链接href属性中删除点击处理程序(我们将在一分钟内使用jQuery添加一个处理程序)

Next lets remove the click handler from the hyperlinks href attribute (we'll add a handler in a minute with jQuery)

<a class="toggle" href="#">

删除了所有CSS，并确保默认情况下隐藏了新闻内容

Removed all your css and just made sure the news-content was hidden by default

.news-content {
    display: none;
}

jQuery

在进行了这些更改之后，让我们为超链接编写一个单击处理程序，以便它执行切换.注意:我使用的是 slideUp 和 slideDown ，而不是 toggle .

With those changes inplace, lets write a click handler for the hyperlinks so that it performs the toggle. Note: I used slideUp and slideDown instead of toggle.

单击此处获取小提琴

Click here for the fiddle

$(document).ready(function () { 
    $('a.toggle').click(function () {

        // select out the elements for the clicked item
        var $this = $(this),
            $root = $this.closest('.news-text'),
            $content = $root.find('.news-content'),
            $toggleImage = $this.find('img');

        // collapse all items except the clicked one
        $('.news-text').each(function () {
            var $itemRoot = $(this);
            if ($itemRoot == $root) return; // ignore the current
            var $itemContent = $itemRoot.find('.news-content');
            if ($itemContent.is(':hidden')) return; // ignore hidden items

            // collapse and set img
            $itemContent.slideUp(); 
            $itemRoot.find('.toggle > img').attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');
        });

        // for the current clicked item either show or hide
        if ($content.is(':visible')) {
            $content.slideUp();
            $toggleImage.attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');
        } else {
            $content.slideDown();
            $toggleImage.attr('src', 'http://www.70hundert.de/images/toggle-close.jpg');
        }

        // stop postback
        return false;
    });
});

已更新-新版本的JQuery处理程序

单击此处获取小提琴

Updated - New Version of JQuery Handler

Click here for the fiddle

$('a.toggle').click(function () {

    var openImgUrl = 'http://www.70hundert.de/images/toggle-open.jpg',
        closeImgUrl = 'http://www.70hundert.de/images/toggle-close.jpg';

    var $newsItem = $(this).closest('.news-text'),
        $newsContent = $newsItem.find('.news-content'),
        isContentVisible = ($newsContent.is(':visible'));

    // slide up all shown news-items - but its expected that only one is visible at a time
    $('.news-text').find('.news-content').slideUp(function () { 
        // on animation callback change the img
        $('.news-text').find('.toggle > img').attr('src', openImgUrl);
    });

    if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
        $newsContent.slideDown(function () {
            // on animation callback change the img
            $newsItem.find('.toggle > img').attr('src', closeImgUrl);
        });
    }

    return false; // stop postback
});

这篇关于jQuery切换有关状态的更改图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！