Question

我正在尝试使用以下代码在此Demo创建自定义切换系统。

#left和#right都运行正常但我在#sw上遇到了一些应该向左或向右切换的问题。如果选择了用户，则单击此按钮必须显示左侧和切换按钮，依此类推

 <div class="switchbox">
    <div class="btn-group switch">
        <button type="button" class="btn btn-default" id="left">Left</button>
        <button type="button" class="btn btn-default" id="sw">Switch</button>
        <button type="button" class="btn btn-default" id="right">Right</button>
    </div>
</div>

这是Javascript：

var scrollWidth = 49;
var scrollWidthsw = 49;
var pos = 0;
$("p").html(pos);
$("#left").on("click", function () {
    $(".switch").animate({
        left: '-=' + scrollWidth
    }, 300);
    pos = pos - scrollWidth;
    $("p").html(pos);
});
$("#right").on("click", function () {
    $(".switch").animate({
        left: '+=' + scrollWidth
    }, 300);
    pos = pos + scrollWidth;
    $("p").html(pos);

});

$("#sw").on("click", function () {

    if (pos == 0) {
        pos = pos + scrollWidth;
        $(".switch").animate({
            left: '-=' + scrollWidthsw
        }, 300);
    } else {
        $(".switch").animate({
            left: '+=' + scrollWidthsw
        }, 300);
    }
});

你能告诉我如何解决这个问题吗？

Answer 1

请检查此更新的fiddle。

我添加了一个额外的变量toggle来存储当前的切换位置。这可以吗？

关于切换开关按钮的问题

1 个答案: