[英]How can you re-render a page from JavaScript/jQuery?
我不太确定这是否是正确的表达方式,但这是我的问题
如您所见,非常简单的代码:
<div class="first"></div>
<div></div>
我想要实现的是:
div
,它将与兄弟元素交换该类 这里的问题是它只在第一次正常工作,第二次新元素通过addClass
接收类时,jQuery无法识别它是否包含第一页加载的类? 我该如何解决这个问题?
PS:我做了一个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。
使用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 }
您需要做的就是将两个项目都推入一个数组,然后在点击时在索引之间切换。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.