[英]Toggle individual divs in a loop
在数据库中找到的每一行中,在HTML中呈现数据(在页面下打印出一个div)时,我试图找到一种方法来允许每个div中的每个按钮在单击时切换单个示例(默认为display:none
在加载页面时display:none
)-例如:
function toggle_div(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
最终标记的示例:
<div>
<div class="wordtitle">Word</div>
<div class="numbers">1</div>
<div class="definition">Definition</div>
<button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>
<div class="example" id="example">Example 1</div>
</div>
<div>
<div class="wordtitle">Word</div>
<div class="numbers">2</div>
<div class="definition">Definition</div>
<button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>
<div class="example" id="example">Example 2</div>
</div>
getElementById()
仅切换第一个div的示例,并且getElementsByClass()
到目前为止似乎还没有奏效-不太确定如何执行此操作-任何想法都值得赞赏!
首先,请勿插入具有相同ID的多个元素。 ID是唯一的 。
您需要的是在您单击的按钮附近切换示例,而不是要显示/隐藏的任何(或全部) .example
。 为此,考虑到您在问题中使用了[jquery]标记,您可以使用选择器来获取最接近按钮的.example
,也可以使用jQuery的内置函数来获取它( .siblings()
)。
我个人会将onclick
移出您的标记,并将此自定义函数绑定到您的javascript中。
另一个重要的事情是 :如果在客户端禁用了javascript,则用户将永远看不到您的示例,因为它们默认情况下在CSS中是隐藏的。 一种解决方法是,最初使用JS隐藏它(请参见此代码段)。
这是我的意思的证明:
$('.example-trigger').click(function() { //Use the current button which triggered the event $(this) //Find the sibling you want to toggle, of a specified class .siblings('.example-label') //Toggle (hide or show) accordingly to the previous display status of the element .toggle(); }); //Encouraged : hide examples only if Javascript is enabled //$('.example-label').hide();
.example-label { display: none; /* Discouraged : if javascript is disabled, user won't see a thing */ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <button class="example-trigger">Toggle example 1</button> <span class="example-label">Example 1</span> </div> <div> <button class="example-trigger">Toggle example 2</button> <span class="example-label">Example 2</span> </div> <div> <button class="example-trigger">Toggle example 3</button> <span class="example-label">Example 3</span> </div>
如@Sean所述,您需要ID是唯一的,因为这是获取元素的方式。
$words .= '<div class="wordtitle">' . $word .'</div>
<div class="numbers">' . $i . '</div>
<div class="definition">' . $definition . '</div>
<button class="button" id="show_example" onClick="toggle_div(\'example\''.$i.')">
show example</button>
<div class="example" id="example'.$i.'">' . $example . '</div>
<br/><br/>';
$i++;
#show_example
也将重复,因此您可能希望将其更改为类。
另一个答案,只是因为我已经准备好答案,并且在发布之前就被叫走了。 就是这样
注意,对于重复元素,使用类代替ID。 它们也一样工作,并且(正如其他人已经说过的那样),ID必须是唯一的。
HTML:
<div class="def">
<div class="wordtitle">Aardvark</div>
<div class="numbers">1</div>
<div class="definition">Anteater</div>
<button class="button show_example">show example</button>
<div class="example" id="example">The aardvark pushed its lenghty snout into the anthill and used its long, sticky tongue to extract a few ants.</div>
</div>
<div class="def">
<div class="wordtitle">Anecdote</div>
<div class="numbers">2</div>
<div class="definition">Amusing Story</div>
<button class="button show_example">show example</button>
<div class="example" id="example">The man told an anecdote that left everyone laughing.</div>
</div>
jQuery的:
var $this;
$('.show_example').click(function() {
$this = $(this);
if ( $this.hasClass('revealed') ){
$('.example').slideUp();
$('.show_example').removeClass('revealed');
}else{
$('.example').slideUp();
$('.show_example').removeClass('revealed');
$this.parent().find('.example').slideDown();
$this.addClass('revealed');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.