试图在 jquery 中查找使用“this”传递的子图像元素

Question

我正在尝试访问在 jQuery 中使用 this 传递给事件处理程序的图像。

因此，在这种情况下，“this”是一个 div 或 li，在 div 或 li 中包含一个 img 标签。

我尝试了以下访问器：

$(this).attr(), $(this).('.imgClassName').attr(), $(this: img).attr(), $(this.imgClassName).attr()

这些都不起作用。这是我的脚本：

        var closedText = 'Show All';
        var openedText = 'Hide All';
        var helpExpand = '/images/expand.png';
        var helpCollapse = '/images/collapse.png';

$('li.helpList: a').click(function () {
            $(this).next().slideToggle('fast', function () {

                if (faqClosed) {
                    $(this).attr({
                        src: helpExpand,
                        title: openedText,
                        alt: openedText
                    });
                } else {
                    $(this).attr({
                        src: helpCollapse,
                        title: closedText,
                        alt: closedText
                    });
                }
            });
            return false;
        });

这不起作用。但是，这确实有效（对于我的隐藏/显示全部）：

$('#showAll').click(function () {
            if (faqClosed) { // closed
                $('li.helpList: div').show('fast'); faqClosed = false;
                $('#showAll').text(openedText);
                $(".helpToggle").attr({
                    src: helpExpand,
                    title: openedText,
                    alt: openedText
                });
            } else { // opened
                $('li.helpList: div').hide('fast'); faqClosed = true;
                $('#showAll').text(closedText);
                $(".helpToggle").attr({
                    src: helpCollapse,
                    title: closedText,
                    alt: closedText
                });
            }
            return false;
        });

$('li.helpList: div') 是打开/关闭项目的容器。其中有一个带有小箭头的 img 标签。这是容器的 HTML：

             <li class="helpList">
                <a href="#">
                    <img src="/images/collapse.png" class="helpToggle" alt="Contraer" />How do I do stuff?
                </a>
                <div class="helpContent">To do stuff, please do something.</div>
            </li>

[更新]

这是我的测试脚本，它根据状态提醒打开或关闭。这目前有效，但仍然找不到图像（collapse/expand.png 文件不会隐藏，并且永远不会改变）

 // Wire up hide/show to a.click event: 
        $('li.helpList: a').click(function () {
            $(this).next().slideToggle('fast', function () {
                if (faqClosed) {
                    alert('closed');
                    $(this).find('.helpToggle').hide();
                    $(this).find('img').attr({
                        src: helpExpand,
                        title: openedText,
                        alt: openedText
                    });

                    faqClosed = false;

                } else {

                    alert('open');
                    $(this).find('.helpToggle').show();
                    $(this).find('img').attr({
                        src: helpCollapse,
                        title: closedText,
                        alt: closedText
                    });

                    faqClosed = true;
                }

Answer 1

您从a 标记开始。你调用.next() 得到下一个兄弟（div），然后调用slideToggle()。

this 在该上下文中是 div，它不包含图像。

如果您想在a 标记内搜索，请在调用slideToggle() 之前存储对它的引用，然后将其用作选择器的上下文（第二个参数）。

$('li.helpList: a').click(function () {
     var anchor = this;
     ... // snipped for brevity
     $('img', anchor).attr(...)

这里有一个working demo 来说明它（为图片道歉，这是我唯一可用的）。

Answer 2

你可以使用：

$(this).find('img')...

获取所有子图像（任何深度）。

Answer 3

你试过 $(this).find('.imgClassName').attr() 吗？