jquery - 尝试在 jquery 中查找使用 "this"传递的子图像元素

Question

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

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

我尝试了以下访问器:

$(this).attr(), $(this).('.imgClassName').attr(), $(这个: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来说明它(对图片表示歉意，这是我唯一可用的)。