要素のグループを選択するときに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>