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

Question

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

因此，在这种情况下，“ this”将是div或li中包含img标记的div或li。

我已经尝试了以下访问器：

$（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>

[UPDATE]

这是我的测试脚本，该脚本警告打开或关闭状态。 目前可以使用，但是仍然找不到图片（塌陷/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

您可以使用：

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

获取所有作为其子级（任何深度）的图像。

Answer 2

您从a标签开始。 您调用.next()以获得下一个同级对象（ div ），然后在其上调用slideToggle() 。

this在这方面是div ，其中不包含图像。

如果你想在中搜索a标签，存储对它的引用打电话之前slideToggle()然后用它作为你的选择的情况下（第二个参数）。

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

这是一个演示它的工作示例 （为图片致歉，这是我唯一的可用）。

Answer 3

您是否尝试过$（this）.find（'。imgClassName'）。attr（）？