jquery - 如何使用元素标签向左更改？

Question

我的代码是这样的：

<label><li><input name="skills[]" class="skills" value="1" type="checkbox" /></li>a</label>
<label><li><input name="skills[]" class="skills" value="2" type="checkbox" /></li>b</label>

对于选中复选框的更改（左元素），我使用以下代码：

$('input.skills').on('change', function() {
if($(this).is(':checked'))
{
    $(this).parents('li').append('<span class="text">add</span>');
} else {
    $(this).parents('li').find('.text').remove();   
}


$(this).animate({left:'500'},1000);
  });

但是不要更改 LABEL 位置，只需更改选中的复选框位置。

Answer 1

你可以移动整个li。http://jsfiddle.net/pyuAU/

HTML

<ul class="skill-holder">
    <li><input name="skills[]" class="skills" value="1" type="checkbox" /></li>
<li><input name="skills[]" class="skills" value="2" type="checkbox" /></li>
</ul>

CSS

.skill-holder > li {
    position: relative;
}

JS

$('.skill-holder').on('change', '.skills', function() {
    var $this = $(this),
        parent = $this.closest("li"),
        moved;
if(moved = $this.is(':checked'))
{
    parent.append('<span class="text">اضافه</span>');
} else {
    parent.find('.text').remove();   
}


    parent.animate({left:moved ? 500: 0},1000);
  });