Question

我使用jquery进行正/负图像切换，但是当我点击ul时，每个正/负图像会同时发生变化。我需要它只更改它被点击的ul的图像。

jQuery的：

$("#xmlDiv").on("click", "ul", function(e) {
    $(this).find(".mainlist").slideToggle('slow', function () {
        if($('span.minus img').attr('src') == 'images/plus.png')
            $('span.minus img').attr('src', "images/minus.png");
        else
            $('span.minus img').attr('src', "images/plus.png");
    });
});

HTML：

<div id="xmlDiv">
    <ul class="section">
        <li class="root"><span class="minus"><img src="images/minus.png"></span> Antivirus Compliance
            <ul class="mainlist" style="margin-left: -25px; display: block;">
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not installed.">Not Installed</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not running.">Not Running</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not updated.">Not Updated</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Non Compliant</span>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="section">
        <li class="root"><span class="minus"><img src="images/minus.png"></span> Classification
            <ul class="mainlist" style="margin-left:-25px;">
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Classification</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">DHCP</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">p0f</span>
                </li>
            </ul>
        </li>
    </ul>

非常感谢任何帮助。谢谢！

Answer 1

您正在为所有span.minus img元素选择ul。您需要做的是使用$(this)仅抓取相对于点击的ul

的跨度

$("#xmlDiv").on("click", "ul", function(e) {
    var clickedUl = $(this);                                      // reference to the clicked ul element
    clickedUl.find(".mainlist").slideToggle('slow', function () { // toggle the .mainlist class element within the clicked ul element
        clickedUl.find('span.minus img');                         // find the img within the clicked ul
        if(img.attr('src') === 'images/plus.png')
            img.attr('src', "images/minus.png");
        else
            img.attr('src', "images/plus.png");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xmlDiv">
    <ul class="section">
        <li class="root"><span class="minus"><img src="images/minus.png"></span> Antivirus Compliance
            <ul class="mainlist" style="margin-left: -25px; display: block;">
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not installed.">Not Installed</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not running.">Not Running</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not updated.">Not Updated</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Non Compliant</span>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="section">
        <li class="root"><span class="minus"><img src="images/minus.png"></span> Classification
            <ul class="mainlist" style="margin-left:-25px;">
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Classification</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">DHCP</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">p0f</span>
                </li>
            </ul>
        </li>
    </ul>

Answer 2

您可以使用this

中的ul

$("#xmlDiv").on("click", "ul", function(e) {
    var firstThis=$(this);
    $(this).find(".mainlist").slideToggle('slow', function () {

        if(firstThis.find('span.minus img').attr('src') == 'images/plus.png')
            firstThis.find('span.minus img').attr('src', "images/minus.png");
        else
            firstThis.find('span.minus img').attr('src', "images/plus.png");
    });
});

http://jsfiddle.net/lTasty/9pohn7e0/

如何只更改子元素的切换图像？

2 个答案: