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

Answer 1

你正在使用两个＆＃34; id＆＃34;具有相同值（<ul id="list-items-container"></ul>）的属性。在HTML页面中，您只能使用唯一ID，这是您的问题！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以用JavaScript换掉这个漂亮的jQuery。在这里，它会切换active的类，无论点击什么li元素，并从它的兄弟姐妹中删除它：

$('li').click(function() {
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
});

Answer 3

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

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/

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

3 个答案: