如何从 JavaScript/jQuery 重新渲染页面？答案

【问题标题】：How can you re-render a page from JavaScript/jQuery?如何从 JavaScript/jQuery 重新渲染页面？
【发布时间】：2017-01-18 03:18:44
【问题描述】：

我不太确定这是否是正确的表达方式，但这里是my problem

如你所见，非常简单的代码：

<div class="first"></div>
<div></div>

我想要实现的是：

您单击带有 first 类的div，它将将该类与兄弟元素交换
您单击同级元素，它会将其交换回来，因此您只需围绕 2 个元素交换类

这里的问题是它只有第一次才能正常工作，第二次当新元素通过addClass接收到类时，jQuery在第一个页面加载时不识别它包含该类？我该如何解决这个问题？

PS：我做了一个console.log(111); 只是为了确保，而且确实只有当我在第一次交换后单击黑色div 时才会触发它（不应该有 first 上课了）

【问题讨论】：

我认为 JQuery 在没有明确告诉它这样做的情况下无法重新解析 DOM。在文档准备好时，只有第一个 div 具有“第一”类，并且保持这种状态。您可以尝试解析所有 DOM 以搜索“第一”类的函数。也许 Vanilla JS 在这种情况下更有效。

标签： javascript jquery render swap

【解决方案1】：

要实现此行为，您可以在元素包装器上使用委托事件http://api.jquery.com/delegate/；

$(document).delegate('.first', 'click', function(e){
    e.preventDefault();
    console.log(123);
    $(this).removeClass('first');
   $(this).siblings().addClass('first');
})

【讨论】：

如果你只有两个孩子，这就是你想要的答案
您使用e.preventDefault() 阻止了哪些默认操作？
只是复制粘贴，以尽量减少问题和答案之间的差异。

【解决方案2】：

一个快速简单的方法是这样的：

$(document).ready(function() {
  var first = $('.first');
  var second = first.next();
  first.click(function(e) {
    e.preventDefault();
    first.removeClass('first');
    second.addClass('first');
  });
  second.click(function(e) {
    e.preventDefault();
    second.removeClass('first');
    first.addClass('first');
  });
});

div {
  background-color: black;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}
.first {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"></div>
<div></div>

这种方式不能很好地扩展。

您的问题是您仅在单击 $(first) 时更改，单击时不会更改它仍然指向第一个 div。

使用香草 javascript 的更好方法：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('first')) {
    e.target.classList.remove('first')
    var sibling = getNextSibling(e.target) || getPreviousSibling(e.target)
    if (sibling) {
      sibling.classList.add('first')
    }
  }
})

function getNextSibling(elem) {
  var sibling = elem.nextSibling 
  while(sibling && sibling.nodeType != 1) {
    sibling = sibling.nextSibling
  }
  return sibling
}

function getPreviousSibling(elem) {
  var sibling = elem.previousSibling 
  while(sibling && sibling.nodeType != 1) {
    sibling = sibling.previousSibling
  }
  return sibling
}

【讨论】：

您需要将 jquery 添加到您的沙盒演示中。这也不是真正解决这个问题的方法。
@JonSG 我解决了这个问题，我提到这是最好的解决方案。我更新了我的答案

【解决方案3】：

您需要做的就是将这两个项目推入一个数组，然后在点击时在索引之间翻转。

var elems = [];
$(document).on("click", ".first", function(event) {
   elems = elems.length == 0 ? [event.originalEvent.target, $(event.originalEvent.target).next()] : elems;
  $(elems[event.originalEvent.target === elems[0] ? 1 : 0]).addClass("first");
  $(elems[event.originalEvent.target === elems[0] ? 0 : 1]).removeClass("first");
});

.first {
  color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">x</div>
<div>y</div>

【讨论】：