Question

这里的总js newb。

这是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>

这是我需要的'逻辑'......

当用户点击链接

时

捕获该元素的ID

将其设为变量

循环浏览所有具有'sizeAvail'类

的ul的li

如果li元素匹配变量

停止循环并转到下一个ul

如果ul没有匹配变量的li

将容器div的类设置为'hide'

这就是我到目前为止......任何帮助都将不胜感激。

<script type = "text/javascript" > $(document).ready(
 $(".dur").click(function () {
 var clickedSize = $(this).attr("id");
 $(".sizeAvail").each(function (li,+) {
    alert($(this).text());
 });
}); 
</script>

Answer 1

这是一个工作小提琴：

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的大部分方面都需要引用。< / p>

如果仍然无效，请确保您有一个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';
            }
        }
    }
}

http://jsfiddle.net/Hive7/uZTYf/2/

Answer 2

你要做的每件事都是非常简单的语法。您可以找到有关在许多地方使用的方法的文档。你可以简单地使用javascript但我假设你想使用jQuery

在高级别上，您将希望使用jQuery选择器获取所有UL对象，然后使用所有LI子级的每个UL循环，例如：

$('ul').each(function() {
    $(this).find('li').each(function(){

    });
});

要获取您要查找的数据，您可以使用addClass（），attr（）等jQuery方法。

Answer 3

您可以使用not，has和contains选择器的组合来获取匹配的元素，并使用addClass在其上设置类。

价：

http://api.jquery.com/not-selector/

http://api.jquery.com/has-selector/

http://api.jquery.com/contains-selector/

http://api.jquery.com/addClass/

代码：

$(".dur").click(function () {
    $(".sizeAvail:not(:has(li:contains('"+$(this).prop("id")+"')))").addClass('hide')
});

演示：http://jsfiddle.net/IrvinDominin/t8eMD/

Answer 4

您可以使用此功能。检查div的所有li时设置标志。如果没有li与id具有相同的值，则最后隐藏div。

  $(document).ready(function(){
    $(".dur").click(function () {
      var clickedSize = this.id;
      $(".sizeAvail").each(function(){
          var hide = 1;
          $(this).children('li').each(function(){
            if(clickedSize == $(this).text()) hide=0;
          });
          if(hide){
              $(this).closest('div').hide(); //Or $(this).parent().hide();
          }
      });
    }); 
  });

<强> JSFIDDLE

Answer 5

您也可以尝试这个

$('a.dur').on('click', function(e){
    e.preventDefault();
    var id = this.id;
    $('ul.sizeAvail li').each(function(){
        if($(this).text() == id) $(this).closest('ul').addClass('hide');
    });
});

EXAMPLE.

Answer 6

演示： http://jsfiddle.net/QyKsb/

这是一种方法，就像你一样。但是，我不喜欢，个人喜欢用数据混乱html。但它在某些情况下可能是不错的选择，但我不喜欢它。

你也不能给id一个以数字开头的值。

var products= $("div[class^='product']"),
    dur =$('.dur');

dur.click(change);
function change(){
   var size= $(this).data('size');
    products.each(function(){
        var d = $(this);
        d.find('.sizeAvail>li').each(function(){
            d.hide(); 
            if($(this).text()==size) { d.show(); return false;}
        });
    });
}

使用Jquery循环遍历列表

6 个答案: