从左到右或从右到左移动列表项更新数据属性

Question

这是对“重新排序列表元素 - jQuery？”问题的参考。已经问过here

现在我想更进一步。我想做的是，我只是想为电子商务建立一个比较产品项目。

所以，我在这里找到了重新排序列表项。 但是我想在每个名为“Left”和“Right”的列表项中添加两个按钮，尽管在这里我只显示了一个，即“Right”。单击“右”按钮时，“数据排序”值将更新为 +1，列表将向右移动，即在下一个位置，下一个定位的列表项将重新排序到它的前一个位置。简而言之，li 项目并排移动。

所以 HTML 如下：[刚刚添加了按钮]

<ul id="ulName">
<li data-sortby="1">three <a href="javascript:;" class="rGth" >Right</a></li>
<li data-sortby="2">one<a href="javascript:;" class="rGth" >Right</a> </li>
<li data-sortby="3">two<a href="javascript:;" class="rGth" >Right</a> </li>
<li data-sortby="4">four<a href="javascript:;" class="rGth" >Right</a> </li>

脚本是：

$(document).ready(function() {

var ul = $('ul#ulName'),
    li = ul.children('li');


    li.detach().sort(function(a,b) {
        return $(a).data('sortby') - $(b).data('sortby');


    });


    ul.append(li);

   $('.rGth').each(function(){
          var thisli = $(this);
          var parent = thisli.parent('li');
          var right =  parent.data('sortby') + 1;
          var left = parent.data('sortby') - 1;
          thisli.click(function(){
          //alert(parent.data('sortby')+1);
         alert(right);
         alert(left);
          parent.data('sortby', right);
         parent.next().data('sortby',left);

        });
    });

}); 

但是我发现“data-”属性没有更新。 任何人都可以帮我解决我的问题吗？

我已经编辑了我的代码。它发出数据属性值的警报，但我看到它没有改变。我知道我做的一团糟。有人可以帮忙吗？ 这是Fiddle

Answer 1

我终于更改了我的代码并获得了我正在寻找的结果。这是最终代码：

$('.down').click(function(){
            var cur = $(this).parent(),
                next= $(this).parent().next();


                if(next.length > 0 )    {
                                 var moveDown = (cur.offset().left + cur.outerWidth()) - (next.offset().left + next.outerWidth()),
                     moveUp = (next.offset().left + next.outerWidth()) - (cur.offset().left + cur.outerWidth());

                        cur.css('position', 'relative');
                        cur.animate({'left':-moveDown});

                        next.css('position', 'relative');
                        next.animate({'left':-moveUp},function(){
                                cur.detach().insertAfter(next);
                                next.detach().insertBefore(cur);

                             cur.css({'position': 'static', 'top': 0});
                             next.css({'position': 'static', 'top': 0}); 
                        });


                }
                        //cur.detach().insertAfter(next);
                        //next.detach().insertBefore(cur);



        });

        $('.up').click(function(){
            var cur = $(this).parent(),
                prev= $(this).parent().prev();


            if(prev.length > 0) {
                            var moveUp = (cur.offset().left + cur.outerWidth()) - (prev.offset().left + prev.outerWidth()),
                moveDown = (prev.offset().left + prev.outerWidth()) - (cur.offset().left + cur.outerWidth());
                        cur.css('position', 'relative');
                        cur.animate({'left':moveDown});

                        prev.css('position', 'relative');
                        prev.animate({'left':moveUp},function(){
                                cur.detach().insertBefore(prev);
                                prev.detach().insertAfter(cur);

                             cur.css({'position': 'relative', 'left': 0});
                             prev.css({'position': 'relative', 'left': 0}); 
                        });
                }
        });