将变量从逗号拆分为多个变量

Question

如果您向下滚动并点击小的彩色框，我现在在you can see live here小方框中显示自行车的框架颜色。

有些框架有两种颜色，所以不是只显示一种颜色，我希望小颜色框使用CSS3 background-color并显示两种颜色而不是一种IF，框架有两种颜色值，例如这里：

我的代码看起来像这样。

@foreach (var bikeColor in images)
  {
    var color = bikeColor.GetPropertyValue("frameColor");

    <div class="frameColor" data-color="#@color" style="background-color:#@color"></div>
   }

frameColor是来自Umbraco的字符串，在字符串中我添加颜色如下：cccccc。但是我想添加两种颜色：cccccc, 000000，然后以某种方式将两个颜色值分成两个变量，如果有两种颜色则显示它们。

使用Javascript / jQuery的

  $(".frameColor").each(function () {
        var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
        categoryImage.first().show();

        if ($(categoryImage).length > 1) {

            $(this).on('click', function () {
                var color = $(this).data('color').replace('#', '');

                $(".frameColor").removeClass("active");
                $(this).addClass("active");

                $(categoryImage).hide().filter(function () {
                    return $(this).data('frame-color') == color;
                }).show();
            });
        }
        else {
            $(this).hide();
        }
    });

感谢您的关注

Answer 1

根据您指定的分隔符，使用分割字符串的.split并返回各个部分的数组。

因为你会得到一个数组。您只需检查数组的.length即可查看您拥有的颜色数量并相应地进行操作。

注意：使用.replace()也是一个好主意，因此您不会在各个颜色值中获得任何不需要的空白字符。：

var frameColor = "cccccc, ffffff";

// Strip all the space chars. out of the string and then split 
// where there are commas. Return the result as an array.
var colors = frameColor.replace(/\s+/g, "").split(",");

// Test of the result
console.log("There are " + colors.length + " colors and they are " + colors[0] + " and " + colors[1]);

// Different actions based on # of colors
switch(colors.length){
  case 1:
    console.log("There is only one color");
    break;
  case 2:
    console.log("There are two colors");
    break;
}