Question

我想在连接列表中交换两个项目后重置一个类。这是我的HTML：

<ul id="basisspelers" class="connectedSortable">
                    <li class="schuinblok">
                        <img class="portret" src="img/ruiter.png" />
                        <div class="addbutton"></div>
                        <h2>Robbin Ruiter</h2>
                        <p>1 / Goalkeeper</p>
                    </li>

                    <li>
                        <img class="portret" src="img/maarel.png" />
                        <div class="addbutton"></div>
                        <h2>Mark van der Maarel</h2>
                        <p>2 / Linksachter</p>
                    </li>

                    <li class="schuinblok">
                        <img class="portret" src="img/derijck.png" />
                        <div class="addbutton"></div>
                        <h2>Timothy Derijck</h2>
                        <p>3 / Linksachter</p>
                    </li>
</ul>

这是addbutton和checkbutton的css：

.addbutton {
background-image: url(../img/addbutton.png);
background-repeat: no-repeat;
float: right;
height: 30px;
width: 30px;
right: 8px;
top: 30px;  
}

.checkedbutton {
background-image: url(../img/checkedbutton.png);
background-repeat: no-repeat;
float: right;
height: 30px;
width: 30px;
right: 8px;
top: 30px;  
}

这是我的jquery：

$(function () {
$("#basisspelers").sortable({
    cursor: 'pointer',
    connectWith: ".connectedSortable"
}).disableSelection();

$("#wisselspelers").sortable({
    cursor: 'pointer',
    connectWith: ".connectedSortable"
}).disableSelection();

$(".connectedSortable").on('click','li', function () {
    $(this).siblings().removeClass('selected');
    $(this).toggleClass('selected');
    $(this).siblings().find('.addbutton').removeClass('checkedbutton');
    $(this).find('.addbutton').toggleClass('checkedbutton');
    switchSelectedItems()
});
});

function switchSelectedItems() {
var $selected = $('.selected');
if ($selected.length == 2) {
    $selected.each(function () {
        $(this).after($selected.not(this).clone().removeClass('selected'));
    }).remove()
}
}

我希望在两个项目交换后删除checkedbutton类。但我无法让它发挥作用。上面的代码适用于选定的CSS。但我无法使用checkbutton类。

你能帮助我吗？

提前致谢。

映入眼帘，

的Wouter

切换元素后重置类

0 个答案: