如何從JavaScript / jQuery重新呈現頁面？

Question

我不太確定這是否是正確的表達方式，但這是我的問題

如您所見，非常簡單的代碼：

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

我想要實現的是：

1. 單擊第一個類的div ，它將與兄弟元素交換該類
2. 您單擊兄弟元素，然后將其交換回來，因此您只需在2個元素周圍交換類

這里的問題是它只在第一次正常工作，第二次新元素通過addClass接收類時，jQuery無法識別它是否包含第一頁加載的類？ 我該如何解決這個問題？

PS：我做了一個console.log(111); 只是為了確保，而且當我在第一次交換后點擊黑色div （不應該有第一個類的那個）時，它肯定會觸發

Answer 1

要實現此行為，您可以在元素包裝器上使用委派事件http://api.jquery.com/delegate/ ;

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

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

使用vanilla 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 } 

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