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

Question

我有 2 个modal元素。在这两个中，我都有这个小的javascript 样式元素：https ://jsfiddle.net/EricTalv/wjmfe799/10/ 通过在一个页面上只有其中一个可以正常工作。

当我尝试将这些添加到我的模式时 ，问题就来了： https ://jsfiddle.net/EricTalv/x5qwnv82/1/

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

我想要做的是仅在按下其中一个项目时添加一个.active类，并且在离开最后一个选择的项目时应该保留。

我试过这个小提琴： 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;
}

标签： javascriptjqueryhtmlcssbootstrap-modal

Answer 1

您正在使用具有相同值 ( <ul id="list-items-container"></ul>) 的两个“id”属性。在 HTML 页面中，您只能使用唯一 ID，这是您的问题！

var header = [].slice.call(document.querySelectorAll('.list-items-container'));

header.forEach(function(hd) {
  var bts = [].slice.call(hd.querySelectorAll('.item'));
  
  bts.forEach(function(bt) {
    bt.addEventListener('click', function() {
      var current = document.querySelector('.item.active');
      current.className = current.className.replace(' active', '');
      this.className += ' active';
    });
  });
});

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;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
    Open modal 1
  </button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">
    Open modal 2
  </button>


<!-- 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 class="list-area">
        <ul class="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 class="list-area">
        <ul class="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>