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を一度に1つずつ表示するという要件については、次のようなことができます:

$(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_divsjQueryオブジェクトである場合、jQueryオブジェクト$all_divs[0]の最初の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");
});

そうは言っても、1 つの要素を除くすべての要素が既に非表示になっていると予想しているようで、その要素を見つけて非表示にしています。もしそうなら、あなたはそれを一行で達成することができます：

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

jQuery メソッドは、呼び出された jQuery オブジェクト内のすべての要素に適用されます.hide()。.css()

于 2012-07-21T07:20:56.837 に答える
2

each()選択した要素を反復処理できるjQueryメソッドを使用できます。

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

:visible表示されている div を選択する場合は、セレクターを使用できます。

表示されているすべての要素を選択します。

$('.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

eachJQueryの標準メソッドを使用します。

$('.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 に答える