Question

我不知道为什么.each（）在我的代码中没有工作

function showhide(id){
    $('#mydiv'+id).each(function(){
    if(this).is(":visible") ) {
      $(this).css('display','none'); 
    }else {     
      $(this).css('display','block');       
        }
    });
}

<span id="mydiv" style="display:none;">
blah blah blah
</span>

<a href="#" onclick="showhide($id);return false;" />show/hide</a>

Answer 1

你正在使用一个id选择器 - 在页面中id应该是唯一的，所以用id选择器调用.each是没有意义的。

而是为每个涉及的元素分配一个类并使用

$('.mydivclass').each( ... );

Answer 2

看起来你的第3行有一些语法问题。在这里它被清理干净;

...
if ( $(this).is(":visible") ) {
...

Answer 3

正如其他人所说，ID应该是唯一的，因此迭代具有相同ID的多个元素没有多大意义，而是使用类。

另外，构建JavaScript的一种更好的方法是在一个地方附加你的事件处理程序（在你的情况下是onclick），而不是在html中内联，这样可以使代码更清晰，也更容易维护。

而不是直接访问css属性，$('yourelement').css('display', 'none') 你可以$('yourelement').hide()或$('yourelement').show();

所以你的JS现在看起来像下面的那个。

$(function(){
   var my_divs = $('.mydiv'); 
   $('#show_hide').click(function(){
       my_divs.each(function(){
           var $this = $(this); 
           if( $this.is(':visible') )
               $this.hide(); 
           else 
               $this.show(); 
       }); 
   }); 
});

在您的HTML中，您现在拥有。

<span class="mydiv">
    blah blah blah
</span>

<a id="show_hide" href="#" />show/hide</a>

在你的css文件中

.mydiv{
  display: none; 
}

Answer 4

function showhide(id){
    $('#mydiv'+id).each(function(){
    if($(this).is(":visible") ) {
      $(this).css('display','none'); 
    }else {     
      $(this).css('display','block');       
        }
    });
}

这应该是最终产品

Answer 5

尝试

function showhide(id){
    $('#'+id).each(function(){
        $this = $(this);
        if($this.is(":visible") ) {
            $this.css('display','none'); 
        }else {     
            $this.css('display','block');       
        }
    });
}

或者

function showhide(id){
    $('#'+id).each(function(){
        $this = $(this);
        if($this.is(":visible") ) {
            $this.hide(); 
        }else {     
            $this.show();       
        }
    });
}

<span id="mydiv" style="display:none;">
blah blah blah
</span>

<a href="#" onclick="showhide("mydiv");return false;" />show/hide</a>

Answer 6

虽然已接受的答案已解决了潜在的问题，但您可能会大大简化您的代码：

function showhide(classname){
  $('.' + classname).toggle();
}

使用.each的显式迭代是不必要的，因为大多数jQuery方法会自动遍历jQuery对象中的所有匹配元素。此外，显示和隐藏可以使用.toggle完成。

jQuery .each内部函数

6 个答案: