[英]onClick add/remove active class li items
I've got the following script and it seems to work only 1 way: 我有以下脚本,它似乎只能以一种方式工作:
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")
})
},
It nicely adds/removes the active class to 'download-version-list' li's but only removes/adds the active class to the first 'download-version-items' li. 它很好地将活动类添加/删除到“ download-version-list” li,但仅将活动类删除/添加到第一个“ download-version-items” li。
Any ideas where i go wrong? 有什么想法我做错了吗?
Kind regards, 亲切的问候,
Marc 渣
Per request: 每个请求:
<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>
Pure HTML OUTPUT: 纯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) Added support for Mobile App</p>
<p>Firmware 1.5
<br> (1) Modified DHCP Client list table
<br> (2) Allow Manual DNS Servers on WAN side</p>
<p>Firmware 1.3
<br> (1) Add Apple AirPrint support</p>
<p>Firmware 1.2
<br> (1) DLNA server now supports 10000 files instead of 1000
<br> (2) Fixed some WPS PIN code issues
<br> (3) Improved Samba server compatibitity</p>
<p>Firmware 1.0
<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>
Your code isn't working because when you select the second li element in download-version-list, the next li item in download-version-items is this. 您的代码不起作用,因为当您在download-version-list中选择第二个li元素时,download-version-items中的下一个li项就是这个。
<li class="">Add timeout to check DNS alive</li>
If you select li's not in ol's, it will work 如果您选择li不在ol内,则可以使用
o.find('li').not('ol li').eq(n).addClass("active")
https://jsfiddle.net/wLfyfjra/1/ https://jsfiddle.net/wLfyfjra/1/
Note: It would be better and more reliable to specify classes here rather than html elements, because you have a lot of content/html elements in the li's here, which would prevent something like this happening in the future 注意:在这里指定类而不是html元素会更好,更可靠,因为在li的这里有很多content / html元素,这将防止以后发生这种情况
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.