在循环中切换单个div

时间:2014-10-08 23:26:43

标签: javascript jquery

在HTML中渲染数据(在页面上打印出div),对于在数据库中找到的每一行,我试图找到一种方法来允许每个div中的每个按钮切换个体单击时的示例(加载页面时默认为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()似乎还没有工作到目前为止 - 不太确定如何做到这一点 - 任何想法都非常感激!< / p>

3 个答案:

答案 0 :(得分:0)

首先,不要插入具有相同ID的多个元素。 IDs are meant to be unique

您需要的是在您单击的按钮附近切换示例,而不是要显示/隐藏任何(或全部).example。要实现这一点,考虑到您在问题中使用了[jquery]标记,您可以使用选择器来获取最近的.example按钮,或者使用jQuery的内置函数来获取它( .siblings())。

我个人会将onclick从您的标记中删除,并在您的javascript中绑定此自定义函数。

另一个重要的事情:如果javascript在客户端被禁用,则用户永远不会看到您的示例,因为它们默认隐藏在CSS中。一个修复方法是最初使用JS隐藏它(请参阅代码片段)。

以下是我的意思:

&#13;
&#13;
$('.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();
&#13;
.example-label {
  display: none;
  /* Discouraged : if javascript is disabled, user won't see a thing */
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

正如@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也将重复,因此您可能希望将其更改为类。

答案 2 :(得分:0)

另一个答案,只是因为我准备好了答案并在我发布之前被叫走了。所以就是这样。

请注意,对于重复元素,使用的是类而不是ID。它们也可以正常工作,并且(正如其他人已经说过的那样),ID必须是唯一的。

jsFiddle demo

<强> 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');
    }
});