javascript - 寻找更好的解决方案

Question

我有多种产品，可以根据购买者的愿望购买不同颜色的产品。

我的第一个下拉菜单是，如果他们购买一种产品，这很简单，不会浪费您的时间。

第二个是购买 2 个产品。 下拉1有黑/白/红/蓝 下拉2有黑/白/红/蓝

第二层是购买3种产品

下拉菜单 1 有黑/白/红/蓝 下拉2有黑/白/红/蓝 下拉3有黑/白/红/蓝

每个变体都有不同的链接，例如，在 3 种产品上有 48 种购买黑色的方式。 BK/BK/Bk 等。

我想做的是创建一个采用黑、白、红或蓝色的代码，并创建一个链接，无论颜色如何。

这是一个基于颜色的链接 黑/黑/黑 = http://get.pressybutton.com/cart/653746441:1 不幸的是，链接特征并不基于颜色选项(或者这会容易得多)。我想要做的是创建一种方法，无论选择白黑红、红黑白、黑红白，链接都将始终是黑红白。

相当广泛的权利。这是我创建的代码。 HTML

   <form id="dropdown" name="dropdown">
        <select accesskey="E" class="style stylethree combine3" id="target"
        name="selected">
            <option value="black">
                Black
            </option>

            <option value="blue">
                Blue
            </option>

            <option value="red">
                Red
            </option>

            <option value="white">
                White
            </option>
        </select> <select accesskey="E" class="style stylefour combine4" id=
        "target" name="selected">
            <option value="black">
                Black
            </option>

            <option value="blue">
                Blue
            </option>

            <option value="red">
                Red
            </option>

            <option value="white">
                White
            </option>
        </select> <select accesskey="E" class="style stylefive combine5" id=
        "target" name="selected">
            <option value="black">
                Black
            </option>

            <option value="blue">
                Blue
            </option>

            <option value="red">
                Red
            </option>

            <option value="white">
                White
            </option>
        </select> <input class="select_pre_1" type="button" value=
        "Get (3) Pressy’s!">
    </form>

Jquery

var solidLink = "http://get.pressybutton.com/cart/";
var col_1a;
var col_2a;

var col_1b;
var col_2b;
var col_3b; 
$('.select_pre_1').click(function(){
    /*** BLACK BLACK ---- COLOR ***/
    if(col_1b == "black" && col_2b == "black" && col_3b == "black"){

        window.location.href = solidLink+"653746441:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "red"){
        window.location.href = solidLink+"653746445:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "white"){
        window.location.href = solidLink+"653746449:1"
    }   
    if(col_1b == "black" && col_2b == "black" && col_3b == "blue"){

        window.location.href = solidLink+"653746497:1"
    }
});

最后的想法。

我想做的是创建一个var，它组合了三个选定的变量，然后计算它们，无论它的形式如何，它都应该抓取正确的链接。这是我的例子。

var solidLink = "http://get.pressybutton.com/cart/";
var col_1a;
var col_2a;

var col_1b;
var col_2b;
var col_3b;
var combine_3 = col_1b+","+col_2b+","+col_3b; 
$('.select_pre_1').click(function(){
    if(combine_3 == "black"){
       window.location.href = solidLink+"653746441:1"
    }
    if(combine_3 == "black, white, black")/*** The variation shouldnt matter ***/{
       window.location.href = solidLink+"653746449:1"
    }
});

我认为上面的方法可行。因此，无论颜色如何，它都会检查它是否具有所有这三个变量。最后我知道这可以用 json 来完成...(我不是最好的)。谢谢你!!!我希望我已经为大家阐明了这一点。

Answer 1

而不是这个

$('.select_pre_1').click(function(){
    /*** BLACK BLACK ---- COLOR ***/
    if(col_1b == "black" && col_2b == "black" && col_3b == "black"){

        window.location.href = solidLink+"653746441:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "red"){
        window.location.href = solidLink+"653746445:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "white"){
        window.location.href = solidLink+"653746449:1"
    }   
    if(col_1b == "black" && col_2b == "black" && col_3b == "blue"){

        window.location.href = solidLink+"653746497:1"
    }
});

您应该嵌套 if 语句，使其更清晰、更切题，如果 col_1b 和 col_2b 不是黑色，那么什么都没有关系 col_3b 是

$('.select_pre_1').click(function(){
    /*** BLACK BLACK ---- COLOR ***/
    if(col_1b == "black" && col_2b == "black"){
        if (col_3b == "black"){
        window.location.href = solidLink+"653746441:1";
        } else if col_3b == "red"){
            window.location.href = solidLink+"653746445:1";
        } else if col_3b == "white"){
        window.location.href = solidLink+"653746449:1";
        } else if col_3b == "blue"){
        window.location.href = solidLink+"653746497:1";
        }
    }
});

而且您还缺少分号。

像这样编写代码是嵌套在另一个层次上的，但它很清楚并且切中要害。

执行此操作的另一种方法是使用 Case 语句而不是内部的 if block 。