2

我试图弄清楚 jquery 选择器在选择一组元素时是如何工作的。一旦我拥有了所有元素，我将尝试遍历并检查它们的样式值以找出哪个元素具有该样式值，但它似乎不起作用。我必须以不同的方式迭代它们吗？感谢您的任何帮助。我试过搜索和弄乱它，这就是我现在所拥有的。

function toggle() {
    //get all the content divs
    var $all_divs = $('.content_div');

    //find the content div that is visable
    var $active_index = -1;
    for (i = 0; i < $all_divs.length(); i++) {
        if ($all_divs[i].style.display == "block") {
            $active_index = i;
        }
    }

    $all_divs[$active_index].style.display = "none";
}

编辑：

更多关于我要去哪里的信息。

基本上我有 4 个 div，当我单击一个按钮时，我希望可见的那个消失，而列表中的下一个出现。

整个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
.wrapper {
    width:450px;
    height:30px;
    position:relative;
}

.slide_button {
    width:25px;
    height:30px;
    position:absolute;
    top:0;
}

#left {
    left:0;
}

#right {
    left:425px;
}

.content_div {
    width:400px;
    height:30px;
    position:absolute;
    top:0;
    left:25px;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function toggle() {
    var Divs = $('.content_div');
    var i;
    var index = 0;

    Divs.each(function(index) {
        if ($(this).css('display') == 'block')
            i = index;
        index++;
    });

    if(typeof i !== 'undefined'){
        Divs.eq(i).css('display', 'none');
    }
}
</script>


</head>

<body>
<div class="wrapper">
    <div class="slide_button" id="left">
        <center><a href='javascript:toggle();'><</a></center>
    </div>
    <div id='div1' class='content_div' style="display:block;">
        this is div 1
    </div>
    <div id='div2' class='content_div' style="display:none;">
        this is div 2
    </div>
    <div id='div3' class='content_div' style="display:none;">
        this is div 3
    </div>
    <div class="slide_button" id='right'>
        <center>></center>
    </div>
</div>
</body>
</html>
4

4 回答 4

4

我认为您的代码不起作用的原因是.length()在for循环条件中的使用。jQuery 对象没有.length()方法，它们有.length属性。去掉括号，你的代码应该可以工作了。

编辑：为了您要求一次显示一个 div，您可以执行以下操作：

$(document).ready(function() {
   var $divs = $("div.content_div").hide(),  // first hide all the divs
       i = 0;    
   $divs.eq(i).show();                       // then show the first

   $(".slide_button a").click(function() {        
       $divs.eq(i).hide();                   // on click hide the current div
       i = (i+1) % $divs.length;             // then update the index to
       $divs.eq(i).show();                   // show the next one
   });
});

演示：http: //jsfiddle.net/7CcMh/

（我原来的答案的其余部分：）您用来访问各个元素的语法是可以的：如果$all_divs是一个 jQuery 对象，那么它就是$all_divs[0]对 jQuery 对象中第一个 DOM 元素的引用。然而，jQuery 提供了.each()使这个过程更容易的方法：

$('.content_div').each(function() {
     // here 'this' is the current DOM element, so:
     if (this.style.display == "block")
         this.style.display = "none";
     // OR, to access the current element through jQuery methods:
     $(this).css("display", "none");
});

话虽如此，您似乎希望除了一个元素之外的所有元素都已被隐藏，并且您正在找到那个元素并将其也隐藏起来。如果是这样，您可以在一行中实现：

 $('.content_div').hide();
 // OR
 $('.content_div').css("display", "none");

jQuery 方法喜欢.hide()并.css()适用于调用它们的 jQuery 对象中的所有元素。

于 2012-07-21T07:20:56.837 回答
2

您可以使用 jQueryeach()方法，它可以让您遍历选定的元素。

$('.content_div').each(functon(index){
    if ($(this).is(':visible')) { 
        $(this).hide()
    } 
})

如果要选择可见的 div，可以使用:visible选择器：

选择所有可见的元素。

$('.content_div:visible').css('display', 'none'): // or $('.content_div:visible').hide()

更新：

您可以向锚添加一个类并尝试以下操作：

<center><a href='#' class="toggle">></a></center>


$('.toggle').click(function(e){
  e.preventDefault()  
  if ($('.content_div:visible').next('.content_div').length != 0) {    
     $('.content_div:visible').hide().next('.content_div:hidden:first').show()
  } else {
       $('.content_div').hide().eq(0).show()
  }    
})

演示

于 2012-07-21T07:14:26.623 回答
0

使用 JQuery 中的标准each方法。

$('.content_div').each(function(index) {
    // do work with the given index
    if (this.style.display == "block") {
        this.style.display = "none";
    }
});
于 2012-07-21T07:15:12.297 回答
0

最后的变化：

http://jsfiddle.net/6fPLp/13/

于 2012-07-21T07:16:59.080 回答