13

感谢您的任何帮助，您可以提供！目前，我使用 ui-sortable 代码来允许用户按顺序上下移动项目。现在，我想为这些项目中的每一个提供一组“向上”和“向下”按钮，允许用户通过单击来上下移动项目。我试过修改这些帖子，但我似乎遗漏了一些明显的东西......

jQuery Sortable Move UP/DOWN 按钮 在jquery中向上/向下移动

我想不知何故我没有将 jquery 应用于正确的元素。我的 jsfiddle 在这里：http: //jsfiddle.net/kevindp78/vexw5/2/代码如下。

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg">
    <a class="image">IMG1</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff1
    </div>
</div>
<div class="leg">
    <a class="image">IMG2</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff2
    </div>
</div>
<div class="leg">
    <a class="image">IMG3</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff3
    </div>

</div>

JS

$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});

$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});
4

2 回答 2

20

您的代码中有几个问题需要解决，所以让我们按顺序处理它们。

首先，$('up-button')它缺少了，.所以它不会选择按钮。

接下来你使用parent()只上一级的方法，parents('.leg')改用。

insertBefore()是一种方法，它接受关于放置您选择的内容的目标。

previous()不是一个函数，而是一个函数，它prev()不需要参数，因为它只是选择了前一个元素。

如果你结合所有这些修复，你会得到这样的东西

$('.up-button').click(function(){
  $(this).parents('.leg').insertBefore($(this).parents('.leg').prev());
});

$('.down-button').click(function(){
  $(this).parents('.leg').insertAfter($(this).parents('.leg').next());
});

如这个编辑过的小提琴http://jsfiddle.net/vexw5/6/所示

于 2013-03-18T20:22:06.213 回答
8

您可以尝试用以下内容替换您的 JS：

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});

http://jsfiddle.net/vexw5/7/

这只是基础知识。没有动画或任何东西。

于 2013-03-18T20:17:39.317 回答