当我交换表行时，无法在我的JQuery函数中交换数字

Question

我创建了一个jquery函数，允许我单击向上箭头并在表格中交换行。我在每一行都有排名。但我只能更改点击的数字。我想要两个数字交换。我知道这是获得上述价值的东西。我只是无法弄清楚如何获得上面那行的值。现在它只是未定义。

http://jsfiddle.net/Thread7/2rmowem4/15/

$('.change-rank').click(function() {
var cnt = $(this).attr('cnt');                                                       
var direction = $(this).attr('data-direction'),
    $original = $(this).closest("tr"),
    $target = direction === "up" ? $original.prev() : $original.next();

if ( $target.length && direction === "up" ) {
    $original.insertBefore($target);
    abovecnt = $original.find('.ranky input[type="text"]').val();
    $('#rank_' + cnt).val(cnt-1);
    $('#rank_' + abovecnt).val(cnt);
    alert('abovecnt=' + abovecnt + '|cnt=' + cnt);      
}
else if( $target.length ) {
    $original.insertAfter($target);
}
});

注意：我最终还希望向下箭头也可以交换，但现在只是想让它工作。

Answer 1

为什么不这样：

if ( $target.length && direction === "up" ) {
    $original.after($target)    
}
else if( $target.length ) {
    $original.before($target);
}

http://jsfiddle.net/2rmowem4/16/

Answer 2

我将您的cnt属性转换为数据属性。

编辑：将JS片段更新为@tripleb的推荐：before和after ..而不是插入和更改箭头的值。

---

示例代码段

＆＃13;

＆＃13;

  $('.change-rank.up').click(function(ev) {			
    var $original = $(this).closest("tr"),			
        $target = $original.prev();
  	
  
    if ($target.length) {
        var cnt = $original.data('cnt'),
            targetcnt = $target.data("cnt");
        if (targetcnt) {
            $original.after($target);
            alert(targetcnt);
        }
    }
 });


 $('.change-rank.down').click(function(ev) {			
    var $original = $(this).closest("tr"),		
        $target = $original.next();
        
    if ($target.length) {
        var cnt = $original.data('cnt'),
            targetcnt = $target.data("cnt");
        if (targetcnt) {
            $original.before($target);
            alert(targetcnt);
        }
    }
});

＆＃13;

 .change-rank.up:after { 
     content: attr(data-icon);
 }
 .change-rank.down:after { 
     content: attr(data-icon);
 }

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table>
    <tr>
        <td>Rank</td>
        <td>Username</td>
    </tr>
    <tr data-cnt='1'>
        <td><a href='#' class='change-rank up' data-icon="&#9650;"></a>&nbsp;
            <a href='#' class='change-rank down' data-icon="&#9660;"></a>1</td>
        <td>Joey</td>
        <td>
            <input type='text' id='rank_1' class='ranky' value='1' />
        </td>
    </tr>
    <tr data-cnt='2'>
        <td><a href='#' class='change-rank up' data-icon="&#9650;"></a>&nbsp;
            <a href='#' class='change-rank down' data-icon="&#9660;"></a>2</td>
        <td>Randy</td>
        <td>
            <input type='text' id='rank_2' class='ranky' value='2'>
        </td>
    </tr>
    <tr data-cnt='3'>
        <td><a href='#' class='change-rank up' data-icon="&#9650;"></a>&nbsp;
            <a href='#' class='change-rank down' data-icon="&#9660;"></a>3</td>
        <td>Bobby</td>
        <td>
            <input type='text' id='rank_3' class='ranky' value='3' />
        </td>
    </tr>
    <tr data-cnt='4'>
        <td><a href='#' class='change-rank up' data-icon="&#9650;"></a>&nbsp;
            <a href='#' class='change-rank down' data-icon="&#9660;"></a>4</td>
        <td>Jesse</td>
        <td>
            <input type='text' id='rank_4' class='ranky' value='4' />
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

JsFiddle：Example