如何用JavaScript/jQuery重新渲染页面?

How can you re-render a page from JavaScript/jQuery?

本文关键字：新渲染 jQuery 何用 JavaScript      更新时间：2023-09-26

我不太确定这是否是正确的表达方式，但这是我的问题

如你所见，非常简单的代码: 
<div class="first"></div>
<div></div>

我想实现的是:

  1. 你点击具有第一个类的div，它会将该类与兄弟元素
    2. 交换
  2. 你点击兄弟元素，它会交换回来，所以你只需要在两个元素之间交换类

这里的问题是它的工作正确，只有第一次，第二次当新元素通过addClass接收类，jQuery不承认它包含的类的第一个页面加载?我该如何解决这个问题?

p。S:我做了一个console.log(111);只是为了确保，当然，只有当我在第一次交换后点击黑色div时，它才会触发(不应该有第一个类)

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

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

一个快速而简单的方法是:

$(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
}

您所需要做的就是将这两个项都放入数组中，然后在单击时在索引之间切换。

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>

相关文章：