onClick add/remove 活动 class li 项目

Question

我有以下脚本，它似乎只能以一种方式工作：

initDownloadVersionSwitch: function() {
        $(document).on("click", ".download-version-list li:not(.active)", function() {
            var i = $(this),
                t = i.parent(),
                o = t.prev(".download-version-items"),
                n = i.index();
            t.find("li").removeClass("active"), i.addClass("active"), o.find("li").removeClass("active"), o.find("li:eq(" + n + ")").addClass("active")
        })
    },

很不错 adds/removes 活跃的 class 到 'download-version-list' 里，但只有 removes/adds 活跃的 class 到第一个 'download-version-items' 里。

我哪里出错了？

亲切的问候，

马克

每个请求：

<div class="row">
        <ul class="download-version-items grid grid-4-col">
            <?php foreach ($content->firmwares as $x => $item): ?>
                <li class="download-item<?php echo $x === 0 ? ' active' : ''; ?>">
                    <h3 class="thin"><?php echo $item['title']; ?></h3>
                    <small class="download-publication"><?php __("downloads.label.publication_date"); ?>: <?php echo $item['release_date']; ?></small>
                    <span class="download-text-title"><?php __("downloads.label.versionnumber"); ?>: <?php echo $item['version']; ?></span>
                    <div>
                        <?php echo $item['description']; ?>
                    </div>
                    <div class="center-button">
                      <a class="btn-license button gradient-button" href="<?php echo $item['file_url']; ?>"
                      <?php if ($item['license_enabled']){echo 'data-license="'.Router::url('/modalboxes/gnugpl/notice/firmware?uri='.$item['file_url']).'"';}; ?>
                      >
                          <span><?php __("downloads.firmware.button.download"); ?><small></small></span>
          </a>
                    </div>
                </li>
            <?php endforeach; ?>
        </ul>
        <ul class="download-version-list grid grid-4-col">
            <?php foreach ($content->firmwares as $x => $item): ?>
                <li class="<?php echo $x === 0 ? ' active' : ''; ?>">
                    <span class="download-version-title"><?php __("downloads.label.versionnumber"); ?> <?php echo $item['version']; ?></span>
                    <small><?php echo $item['release_date']; ?></small>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>

纯HTML输出：

<div class="row active">
<ul class="download-version-items grid grid-4-col">
    <li class="download-item active">
        <h3 class="thin">Firmware 2.6</h3> <small class="download-publication">Publication date : 18 January 2016</small> <span class="download-text-title">Version number : 2.6</span>
        <div>
            <p><strong>Changed:</strong></p>
            <ol>
                <li class="">Add timeout to check DNS alive</li>
                <li class="">Add procedure to verify ipv4 and ipv6 on ppp session</li>
            </ol>
            <p><strong>Fixed:</strong></p>
            <ol>
                <li>Fix security issue of NetUSB</li>
                <li>Fixed Apple iOS 9 login issue with the MyWiFi app.</li>
            </ol>
        </div>
        <div class="center-button">
            <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/2747"> <span>Download firmware <small></small></span> </a>
        </div>
    </li>
    <li class="download-item">
        <h3 class="thin">Firmware 2.4</h3> <small class="download-publication">Publication date : 11 November 2015</small> <span class="download-text-title">Version number : 2.4</span>
        <div>
            <p>Show the information of guest network clients on DHCP Status page</p>
        </div>
        <div class="center-button">
            <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/2658"> <span>Download firmware <small></small></span> </a>
        </div>
    </li>
    <li class="download-item">
        <h3 class="thin">Firmware 2.1</h3> <small class="download-publication">Publication date : 19 February 2015</small> <span class="download-text-title">Version number : 2.1</span>
        <div>
            <p>WLR-8100v1-001</p>
            <p>Firmware 2.1
                <br> (1) &nbsp; &nbsp;Added support for Mobile App</p>
            <p>Firmware 1.5
                <br> (1) &nbsp; &nbsp;Modified DHCP Client list table
                <br> (2) &nbsp; &nbsp;Allow Manual DNS Servers on WAN side</p>
            <p>Firmware 1.3
                <br> (1) &nbsp; &nbsp;Add Apple AirPrint support</p>
            <p>Firmware 1.2
                <br> (1) &nbsp; &nbsp;DLNA server now supports 10000 files instead of 1000
                <br> (2) &nbsp; &nbsp;Fixed some WPS PIN code issues
                <br> (3) &nbsp; &nbsp;Improved Samba server compatibitity</p>
            <p>Firmware 1.0&nbsp;
                <br> The first official released firmware for WLR-8100.</p>
        </div>
        <div class="center-button">
            <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/611" data-license="http://domain.com/modalboxes/gnugpl/notice/firmware?uri=http://domain.com/download/firmware/611"> <span>Download firmware <small></small></span> </a>
        </div>
    </li>
</ul>
<ul class="download-version-list grid grid-4-col">
    <li class="active"> <span class="download-version-title">Version number 2.6</span> <small>18 January 2016</small> </li>
    <li class=""> <span class="download-version-title">Version number 2.4</span> <small>11 November 2015</small> </li>
    <li class=""><span class="download-version-title">Version number 2.1</span> <small>19 February 2015</small> </li>
</ul>

Answer 1

您的代码无法正常工作，因为当您 select download-version-list 中的第二个 li 元素时，download-version-items 中的下一个 li 项目就是这个。

<li class="">Add timeout to check DNS alive</li>

如果你 select li 不在 ol's，它会起作用

o.find('li').not('ol li').eq(n).addClass("active")

https://jsfiddle.net/wLfyfjra/1/

注意：在这里指定类比 html 元素会更好更可靠，因为这里的 li 中有很多 content/html 元素，这会防止以后发生类似的事情

onClick add/remove 活动 class li 项目

onClick add/remove active class li items

javascript

jquery

onclick

addclass

removeclass