javascript - 删除和添加类到模态内容元素

Question

我有 2 个 modal 元素。在 both 中，我有这个小的 javascript 样式元素:https://jsfiddle.net/EricTalv/wjmfe799/10/通过仅在一个页面 上使用其中一个，它很好。

问题 当我尝试将这些添加到我的模态时出现: https://jsfiddle.net/EricTalv/x5qwnv82/1/

因此，当我已经在 DOM 中有一个类 .active 时，第一个模态 运行良好，但是，第二个根本不起作用，在我离开第一个模式并返回后，之前选择的元素似乎留在那里，这是一个很好的补充，但我觉得这似乎也会引起问题。

我想做的是添加一个.active类只有当这些元素中的一个被按下时，并且在离开最后一个时选择的元素应该保留。

我试过这个 fiddle :http://jsfiddle.net/chipChocolate/pb95kv32/这个概念可以工作，但不能真正让它工作，而且也让它更难阅读，所以更有效的解决方案会很棒。

HTML:

<!-- The Modal 1-->
<div class="modal" id="modal1">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading 11111</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div id="list-area">
        <ul id="list-items-container">
          <li class="item">item1</li>
          <li class="item">item2</li>
        </ul>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

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

<!-- The Modal 2-->
<div class="modal" id="modal2">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading 22222</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div id="list-area">
        <ul id="list-items-container">
          <li class="item active">other1</li>
          <li class="item">other2</li>
        </ul>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

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

JS:

var header = document.getElementById("list-items-container");
var btns = header.getElementsByClassName("item");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

CSS:

body {
  padding: 10px;
}

/* the list area  */

#list-area {
  background-color: #FC600A;
  border: 2px solid #000;
  display: inline-flex;
  width: 50%;
}

#list-items-container {
  padding: 0;
  width: 100%;
}

#list-items-container li {
  list-style: none;
  font-size: 35px;
  font-family: Corbel;
  color: #1489B8;
  padding: 0 10px 0 10px;
  width: 100%;
  transition: all .5s ease;
}

#list-items-container li:nth-child(odd) {
  background-color: #F7E0D4;
}

#list-items-container li:hover,
#list-items-container .active {
  color: red;
  cursor: pointer;
  padding-left: 50px;
}

Answer 1

1. 您不能有重复的 ID。所以我将 #list-area 更改为.list-area 和 #list-items-container 到 html 和 css 代码中的 .list-items-container。

2. JS 变化:

   //Get all buttons
   var btns = document.getElementsByClassName("item");
   
   for (var i = 0; i < btns.length; i++) {
     btns[i].addEventListener("click", function() {
   
         //for clicked item getting parentNode and all its child
         var siblings = this.parentNode.childNodes
   
         //check if children have class "active" and remove it
         siblings.forEach(function(element) {
             if (element.className && element.className.indexOf('active') !== -1) {
                 element.classList.remove("active");
             }
         })
         //set 'active' to clicked element
         this.className += " active";
     });
   }
   

这里正在更新 jsfiddle https://jsfiddle.net/tehLj8b5/2/