我正在尝试使用向上和向下箭头交换两个元素。
JSFiddle 解决方案会很棒！
My HTML:
<div class="item">
<div class="content">Some text</div>
<div class="move">
<div class="move-down">down</div>
</div>
</div>
<div class="item">
<div class="content">Some other text</div>
<div class="move">
<div class="move-up">up</div>
<div class="move-down">down</div>
</div>
</div>
<div class="item">
<div class="content">Some text</div>
<div class="move">
<div class="move-up">up</div>
<div class="move-down">down</div>
</div>
</div>
<div class="item">
<div class="content">Some other text</div>
<div class="move">
<div class="move-up">up</div>
</div>
</div>
我最后的尝试是：
// el is the clicked one.
jQuery('.move').children().click(function(el) {
if (jQuery(el).hasClass('move-down') === true) {
el = jQuery(el).parent().parent();
el.prependTo(el.after(el));
} else {
el = jQuery(el).parent().parent();
el.appendTo(el.before(el));
}
});
我尝试了很多不同的方法来更改项目。我尝试过replaceWith(), before(), and after()但没有任何效果。
注意：
我已经编写了一个显示正确的向上/向下 DIV 的函数。所以第一个和最后一个只能朝一个方向移动。那已经解决了。我也无法使用任何类型的现有 jQuery 插件。
你可以这样做 - 你需要检查 e.target 而不是 class = move 的 div
jQuery('.move').children().click(function (e) { // <-- argument passed in is the event not an element
var $div = $(this).closest('.item'); // get closest item div
if (jQuery(e.target).is('.move-down')) { // check if clicked is movedown
$div.next('.item').after($div); // if it is move after next
} else {
$div.prev('.item').before($div);// else move it before previous
}
});
FIDDLE http://jsfiddle.net/wirey00/Cpz5P/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
