javascript - 根据 slider 的值将不同的数据推送到数组

Question

我有一个页面，其中包含一些生成一些 CSS 代码的 slider :(它是一个框阴影生成器)我有一个按钮，可以将生成的代码添加到特定区域(#saved ul)并将该代码传递给一个名为 used 的数组(我使用此数组检查用户是否再次向该区域添加了代码。如果代码存在在数组中会出现一条消息“组合已被使用”)。但是今天我遇到了一个问题。正如您所知，框阴影有两种应用方式:

1. 一开始
2. 插入

要更改框阴影的应用方式，我使用了一个 slider 。如果 slider 的值为 0，则它将开始，否则它将被插入。

现在回到我的问题。当用户选择添加已再次使用的代码时，页面会抛出一条消息(该组合已被使用)。但是如果用户更改 slider 以选择插入框阴影，这与 brom 不同一开始该消息将再次出现。这是我的代码:

$("#mark").click(function(){
        var marking=$("#x").val()+$("#y").val()+$("#blur").val()+$("#spread").val();
        if (marking==0){
            console.log("No code changed");
        }
        else{

        var x=$("#x").val()+"px ";
            var y=$("#y").val()+"px ";
            var b=$("#blur").val()+"px ";
            var s=$("#spread").val()+"px ";
            $r=$("#red").val();
            $g=$("#green").val();
            $b=$("#blue").val();
            $color=" rgb("+$r+","+$g+","+$b+")";
            var finalCode=0;
            if($("#blur").val()==0 && $("#spread").val()==0){
                finalCode=x+y;
            }
            else if($("#blur").val() != 0 && $("#spread").val()==0) {
                finalCode=x+y+b;
            }
        if ($("#inset").val()==0) {
            if (used.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            }
            else{
            $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>");
            used.push(finalCode+$color);
        }

        }
        else{
            if (used.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            }
            else{
            $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>");

        }
        }
}

    });

有什么想法吗？？？

Answer 1

我还没有测试过，但它应该是这样工作的。

var used = {
    inset   : [],
    outset  : []
}

$("#mark").click(function(){
    var marking=$("#x").val()+$("#y").val()+$("#blur").val()+$("#spread").val();
    if (marking==0) {
        // make sure to remove this before publishing the app
        console.log("No code changed");
    } else{
        var x=$("#x").val()+"px ";
        var y=$("#y").val()+"px ";
        var b=$("#blur").val()+"px ";
        var s=$("#spread").val()+"px ";
        $r=$("#red").val();
        $g=$("#green").val();
        $b=$("#blue").val();
        $color=" rgb("+$r+","+$g+","+$b+")";
        var finalCode=0;
        if($("#blur").val()==0 && $("#spread").val()==0){
            finalCode=x+y;
        } else if ($("#blur").val() != 0 && $("#spread").val()==0) {
            finalCode=x+y+b;
        }
        if ($("#inset").val()==0) {
            if (used.inset.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            } else{
                $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>");
                used.inset.push(finalCode+$color);
            }
        } else {
            if (used.outset.indexOf((finalCode+$color)) != -1){
                alert("That combination has been used");
            } else{
                $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>");
                used.outset.push(finalCode+$color);
            }
        }
    }
});

如果你愿意，你可以使用 vars 作为 inset 和 outset

var usedInset = [];
var usedOutset = new Array();
// what ever you prefere
[...]
if ($("#inset").val()==0) {
    if (usedInset.indexOf((finalCode+$color)) != -1){
        alert("That combination has been used");
    } else{
        $("#saved ul").append("<li class='text-warning h3 marked'>box-shadow:"+finalCode+$color+";</li>");
        usedInset.push(finalCode+$color);
    }
} else {
    if (usedOutset.indexOf((finalCode+$color)) != -1){
        alert("That combination has been used");
    } else{
        $("#saved ul").append("<li class='text-success h3 marked'> box-shadow:inset "+finalCode+$color+";</li>");
        usedOutset.push(finalCode+$color);
    }
}

希望这有帮助(: