这里是 js 新手。
这是HTML
<a href="#" class="dur" id="8.5">Size 8.5</a>
<div class="product1">
<ul class="sizeAvail" style="display:none;">
<li>8</li>
<li>8.5</li>
<li>9</li>
<li>9.5</li>
<li>10</li>
</ul>
</div>
<div class="product2">
<ul class="sizeAvail" style="display:none;">
<li>8</li>
<li>8.5</li>
<li>9</li>
<li>9.5</li>
</ul>
</div>
这是我需要的“逻辑”...
这就是我目前所处的位置...任何帮助将不胜感激。
<script type = "text/javascript" > $(document).ready(
$(".dur").click(function () {
var clickedSize = $(this).attr("id");
$(".sizeAvail").each(function (li,+) {
alert($(this).text());
});
});
</script>
最佳答案
这是一个有效的 fiddle :
http://jsfiddle.net/Hive7/uZTYf/
这是我使用的 jquery:
$(".dur").click(function () {
var clickedSize = this.id;
$(".sizeAvail li").each(function () {
if($(this).text() == clickedSize) {
$(this).parent().show();
} else {
$(this).hide();
}
});
});
您目前所做的是不正确的,因为您没有循环遍历 .sizeAvail 的子级,因为您没有直接声明虽然您所做的声明没有像 jquery 的大多数方面那样用引号引起来。
如果这仍然不起作用,请确保你有一个 jquery 库
或者您可以使用纯 js 选项:
var $items = document.getElementsByClassName('sizeAvail');
var $dur = document.getElementsByClassName('dur');
for (i = 0; i < $dur.length; i++) {
$dur[i].addEventListener('click', durClick);
}
function durClick() {
var clickedSize = this.id;
for (i = 0; i < $items.length; i++) {
var $liElems = $items[i].getElementsByTagName('li');
for (i = 0; i < $liElems.length; i++) {
if ($liElems[i].innerHTML == clickedSize) {
$liElems[i].parentNode.style.display = 'block';
$liElems[i].style.display = 'block';
} else {
$liElems[i].style.display = 'none';
}
}
}
}
关于javascript - 使用 Jquery 遍历列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19254523/