Question

我正在制作一个有10颗珠子的算盘。当点击一个珠子时，珠子和它前面的所有珠子都被放置在算盘中，剩下的珠子在算盘中向右移动。

清单：

<ul class="abacus">
    <li class="bead">1</li>
    <li class="bead">2</li>
    <li class="bead">3</li>
    <li class="bead">4</li>
    <li class="bead">5</li>
    <li class="bead">6</li>
    <li class="bead selected">7</li>
    <li class="bead off">8</li>
    <li class="bead off">9</li>
    <li class="bead off">10</li>
</ul>

CSS：

li.bead {
    cursor: pointer;
    width: 28px;
    height: 32px;
    float: left;
}

/* just for visuals: */
li.bead.selected {
    background-image: url('../images/smartie-selected.png');
}

li.bead.off {
    float: right;
    background-image: url('../images/smartie-unselect.png');
}

因为'off'珠子向右浮动，所以它们的顺序必须颠倒（否则算盘看起来像：[1] [2] [3] [4] [5] [6] [7] -------- [10] [9] [8]）。

我正在使用的jQuery是：

$("li.bead").click(function() {
    // remove the 'selected' class of the previously selected bead (just for visuals):
    $("li.bead.selected").removeClass("selected");

    // save the number of the bead was selected:
    var no = Number($(this).html());

    // add the 'selected' class to the clicked bead (just for visuals):
    $(this).addClass("selected");

    // add the 'off' class to all the 'higher' beads than the selected one 
    // and removing that class for all he lower beads:
    $(this).parent().children().each(function() {
        if(Number($(this).html()) > no) {
            $(this).addClass('off');
        } else {
            $(this).removeClass('off');
        }
    });

    // reverse all beads:
    $(this).parent().children().each(function(i, li) {
        $(this).parent().prepend(li);
    });             
});

所以，jQuery的最后一步是反转所有珠子，正确排列'off'珠子，但也会反转其他珠子，使得算盘看起来像，例如：

[4] [3] [2] [1] ------------ [5] [6] [7] [8] [9] [10]

我应该添加什么才能反转第一颗珠子？

Answer 1

我的目标是避免浮动。首先，我会尝试向所选元素添加一个margin-right值。像这样......

$("li.bead").click(function() {
    // remove the 'selected' class of the previously selected bead (just for visuals):
    $("li.bead.selected").removeClass("selected");
    $("li.bead.off").removeClass("off");

    // save the number of the bead was selected:
    var no = Number($(this).html());

    // add the 'selected' class to the clicked bead (just for visuals):
    $(this).addClass("selected");

    // add the 'off' class to all the 'higher' beads than the selected one
    $(this).nextAll().addClass("off");         
});

和CSS ...

li.bead {
    cursor: pointer;
    width: 28px;
    height: 32px;
    float: left;
}

/* just for visuals: */
li.bead.selected {
    margin-right:100px;/*change this to suit your design*/
    background-image: url('../images/smartie-selected.png');
}

li.bead.off {
    background-image: url('../images/smartie-unselect.png');
}

Here is a working example

如果您需要正确的边距是动态的，您可以随时在javascript中计算并将其添加到所选元素，例如......

var parent = $(this).parent();
var margin = parent .width() - (parent.children().length * $(this).width());
parent.children().css("margin-right", "0px");//clear other margins
$(this).css("margin-right", margin + "px");//set this margin

Answer 2

你必须建立一个例子，我从未使用过算盘（我不是那么老！）我不能说我真的明白问题出在哪里。但我猜想我要看看jquery的

nextAll()
prevAll()

这样的方法只允许你在选定的珠子之后或之前说明珠子..我相信你需要做什么？

Answer 3

这个怎么样？

$(this).parent().children().each(function() {
        if(Number($(this).html()) > no) {
            $(this).addClass('off');
            $(this).parent().prepend(li);

        } else {
            $(this).removeClass('off');
            $(this).parent().append(li);

        }
    });

使用jQuery部分颠倒listitems

3 个答案: