jquery - 无法将 var 中的类名放入 addClass 命令

Question

我正在尝试构建自己的 360' jQuery 自动图库。我可以添加类，但是，如果我用滑块返回 box1，它不会添加新类。感谢帮助。

这是放到 jsfiddle 的项目：

http://jsfiddle.net/Z8knE/19/

var interval;
    interval = setInterval(function () {
        var chosenvalue = $(".amount1").val()
        var chosenclass = "box" + chosenvalue
        $(".box1").addClass(chosenclass,1000);
}, 100);

Answer 1

在您的方法中删除单词selectedclass周围的引号：addClass()

var interval;
    interval = setInterval(function () {
        var chosenvalue = $(".amount1").val()
        var chosenclass = "box" + chosenvalue
        $(".box1").addClass(chosenclass);
}, 100);

小提琴

Answer 2

您需要使用chosenclass而不是'chosenclass'，您不需要传递第二个参数。

$(".box1").addClass(chosenclass);

如果要删除所有类，请使用.removeClass()否则通过 className 删除

请参阅addClass和removeClass的文档

演示

Answer 3

您正在尝试编写的代码中存在多个问题。

1. removeClass 和 addClass 的使用方式。
2. 您不需要间隔来监视值的变化。您可以使用滑块的更改事件。
3. 您需要删除以前添加的类，以便向后动画工作。

我已经重写了代码以满足您的要求。请注意，jquery 没有通过通配符删除类的方法。所以在 removeClass 中使用函数作为参数，它使用 reg ex 魔法来做这些事情。

$(function() {
    $( "#slider1" ).slider({
        range: "min",
        value: 1,
        min: 1,
        max: 9,
        slide: function( event, ui ) {
            $( ".amount1" ).val( ui.value);

            var chosenvalue = $(".amount1").val()
            var chosenclass = "box" + chosenvalue

            $(".mycar").removeClass (function (index, css) {
                return (css.match (/box\d+/g) || []).join(' ');
            });
            $(".mycar").addClass(chosenclass);
        }
    });
    $( ".amount1" ).val($( "#slider1" ).slider( "value" ));
});

在这里找到更新的小提琴。

http://jsfiddle.net/Z8knE/37/