jquery 切换更改有关状态的图像

Question

我使用 jquery 切换来隐藏一些内容，如果用户想查看它，可以“展开”这些内容。这是它的 jsFiddle:

http://jsfiddle.net/yjs2P/

使用此代码:

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

正如您所看到的，第一个元素已使用“关闭”图像(红色)打开，另外两个元素已使用“打开”图像(橙色)“关闭”。

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

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

提前干杯!

Answer 1

好吧，这样如何 - 首先让我们对您的 html 进行一些更改。

我们不要使用 id，而是进入通过类名引用的心态。因此，对于每个内容 div，我添加了一个 news-content 类

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

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

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

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

.news-content {
    display: none;
}

jQuery

完成这些更改后，让我们为超链接编写一个单击处理程序，以便它执行切换。注意:我使用了 slideUp 和 slideDown 而不是 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 处理程序的新版本

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