如何淡化和淡化使用foreach创建的各个Div元素？

Question

我有一个foreach循环，这会创建多个div元素。

我在用户点击onClick div或fadeIn时点击了fadeOut个事件。

问题是，所有div's显然都具有相同的id，当我点击其中一个div's时，它会淡入并淡出第一个div元素。

我真的不知道如何淡出并淡出它们。

我已在Fiddle

中添加了我的代码

＆＃13;

＆＃13;

  function showItems() {
    var x = document.getElementById('showItemDiv');
    if (x.style.display === 'none') {
      x.style.display = 'block';
    } else {
      x.style.display = 'none';
    }
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
    <div class="row">
      <span class="" style="font-size:10px;">Item Name:</span>
    </div>
    <div class="row">
      <p>
        <span class="" id="">Item 1</span>
      </p>
    </div>
  </div>

  <div id="showItemDiv" style="display: none;">
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

        <div class="row">
          <span class="" style="font-size:10px;">Time Setup:</span>
        </div>

        <div class="row">
          <p>
            <span class="" id="id">1</span>
          </p>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems()">
  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
    <div class="row">
      <span class="" style="font-size:10px;">Item Name:</span>
    </div>
    <div class="row">
      <p>
        <span class="" id="">Item 2</span>
      </p>
    </div>
  </div>

  <div id="showItemDiv" style="display: none;">
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

        <div class="row">
          <span class="" style="font-size:10px;">Time Setup:</span>
        </div>

        <div class="row">
          <p>
            <span class="" id="id">2</span>
          </p>
        </div>

      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您不应对多个元素使用相同的ID。每个元素的ID应始终是唯一的。如果使用相同的id，则selector仅返回具有匹配id的第一个元素。 您应该使用具有相同名称的类。

对于点击的每个元素，您都可以找到它的父元素，为此您可以找到具有所需类的子元素并切换其可见性。

  function showItems(ev) {
    var x = $(ev.target).parents('.row.rounded-top').find('.showItemDiv');
    $(x).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
    <div class="row">
      <span class="" style="font-size:10px;">Item Name:</span>
    </div>
    <div class="row">
      <p>
        <span class="" id="">Item 1</span>
      </p>
    </div>
  </div>

  <div class="showItemDiv" style="display: none;">
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

        <div class="row">
          <span class="" style="font-size:10px;">Time Setup:</span>
        </div>

        <div class="row">
          <p>
            <span class="" id="id">1</span>
          </p>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="row rounded-top" style="margin-top:5px;background-color:lightblue;padding:5px;" onclick="showItems(event)">
  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
    <div class="row">
      <span class="" style="font-size:10px;">Item Name:</span>
    </div>
    <div class="row">
      <p>
        <span class="" id="">Item 2</span>
      </p>
    </div>
  </div>

  <div class="showItemDiv" style="display: none;">
    <div class="row" style="margin-top:15px;background-color: #FFE4E1;padding:5px;">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

        <div class="row">
          <span class="" style="font-size:10px;">Time Setup:</span>
        </div>

        <div class="row">
          <p>
            <span class="" id="id">2</span>
          </p>
        </div>

      </div>
    </div>
  </div>
</div>