编写比较值的简短方法

Question

你好，下面的代码有更短的写法吗？

(data === "item1" || data === "item2" || data === "item3" || data === "item4")

喜欢

(data === "item1" to data === "item4")

因为我的清单将超过 100 项。

这是jsfiddle with the code in it。

请注意，这只适用于 IE11。这是一段代码

ar list = document.querySelectorAll("#dragsource li");
for (i = 0; i < list.length; i++) {
  list[i].draggable = true;
  list[i].ondragstart = function(event) {
    var event = event || window.event;
    var dt = event.dataTransfer;
    dt.setData("text", event.target.id);
    dt.effectAllowed = "move";
    var data = dt.getData("text");

    if ((document.getElementById("onoff").value == "On") && (data === "item1" || data === "item2" || data === "item3" || data === "item4")) {
      (document.getElementById("fruit").style.color = "red") && (document.getElementById("veg").style.color = "black") && (document.getElementById("games").style.color = "black");
    } else if ((document.getElementById("onoff").value == "On") && (data === "item5" || data === "item6" || data === "item7" || data === "item8")) {
      (document.getElementById("veg").style.color = "red") && (document.getElementById("fruit").style.color = "black") && (document.getElementById("games").style.color = "black");
    } else if ((document.getElementById("onoff").value == "On") && (data === "item9" || data === "item10" || data === "item11" || data === "item12")) {
      (document.getElementById("games").style.color = "red") && (document.getElementById("fruit").style.color = "black") && (document.getElementById("veg").style.color = "black");
    } else if ((document.getElementById("onoff").value == "Off") && (data === "item1" || data === "item2" || data === "item3" || data === "item4" || data === "item5" || data === "item6" || data === "item7" || data === "item8" || data === "item9" || data === "item10" || data === "item11" || data === "item12")) {
      (document.getElementById("fruit").style.color = "black") && (document.getElementById("veg").style.color = "black") && (document.getElementById("games").style.color = "black");
    }

  };
}

rojo - 我试图缩短这个：-

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
if(data === "item1" || data === "item2" || data === "item3" || data ===     "item4"){
target1.appendChild(document.getElementById(data));
}
};

这样做但不起作用，没有 D&D 和按钮不起作用。我哪里错了

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text")num;
if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;
if(num <= 4){
target1.appendChild(document.getElementById(data));
}
};

**不完全 解决了 - ("text") 后面缺少逗号，括号在错误的位置，应该放在前面 - if (num

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text"), num;
if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;
{if (num <= 4)
target1.appendChild(document.getElementById(data));
}
};

如果解决方案修改了 ELSE

target1.ondrop=function(event) {
var event=event||window.event;
var dt=event.dataTransfer;
event.preventDefault();
var data = dt.getData("text"), num;
if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;
if (num <= 4){
target1.appendChild(document.getElementById(data));
}
else if (num <= 8){
target2.appendChild(document.getElementById(data));
}
else if (num <= 12){
target3.appendChild(document.getElementById(data)); 
}
else if (num <= 60){
target4.appendChild(document.getElementById(data));  
}
else if (num <= 86){
target5.appendChild(document.getElementById(data));
}
};
};

Answer 1

您可以很容易地通过正则表达式刮擦和计算出问题。

var data = 'item12'; // demo value

if (num = /^item(\d+)$/.exec(data)) {
    num = num[1] * 1;
}

如果正则表达式匹配，它将执行赋值，将字符串中的值强制转换为数字。如果不匹配，则赋值强制为 false，num 为空。对于给定的data='item12' 值，num 的值是12。从那里，它只是一个简单的大于/小于的检查。

switch (true) {
    case (num < 5):
        /* relevant stuff here */
        break;
    case (num < 10):
        /* other relevant stuff here */
        break;
    case (num < 20):
        /* do something else */
        break;
    default:
        /* not matched by any of the conditions above */
}

使用switch 语句，num 的值为12 将触发第三个条件（num

---

额外积分

而不是这些重复的东西：

document.getElementById("fruit").style.color = "black" && document.getElementById("veg").style.color = "black" && document.getElementById("games").style.color = "black"

试试这个：

var colors = {
    "fruit": "black",
    "veg": "red",
    "games": "black"
}

for (var i in colors) {
    document.getElementById(i).style.color = colors[i];
}

或者，既然你要做很多颜色变化，那就写一个函数。

function color(id, foreground, background) {
    document.getElementById(id).style.color = foreground;
    document.getElementById(id).style.backgroundColor = background;
}

color('fruit','black','gold');
color('veg','red','black');
color('games','black','gold');

---

这是用我建议的更改重写的脚本。让这个作为一个例子来说明如何编写函数来处理重复性任务可以减少打字。

// arguments: {"id":"color", "id2":"color2", "id3":"color3", etc.}
function color(paramObj) {
    for (var i in paramObj) {
        document.getElementById(i).style.color = paramObj[i];
    }
}

var list = document.querySelectorAll("#dragsource li");
for (var i = 0; i < list.length; i++) {
    list[i].draggable = true;
    list[i].ondragstart = function(event) {
        var event = event || window.event,
            dt = event.dataTransfer;
        dt.setData("text", event.target.id);
        dt.effectAllowed = "move";
        var data = dt.getData("text"), num;

        if (num = /^item(\d+)$/.exec(data)) num = num[1] * 1;

        if (document.getElementById('onoff').value == 'On') {
            if (num <= 4) color({'fruit':'red','veg':'black','games':'black'});
            else if (num <= 8) color({'fruit':'black','veg':'red','games':'black'});
            else if (num <= 12) color({'fruit':'black','veg':'black','games':'red'});
        } else {    // #onoff value is "Off"
            if (num <= 12) color({'fruit':'black','veg':'black','games':'black'});
        }
    };
}

Answer 2

将条件值放入数组中。

var dataArray = ["item1", "item2", "item3"...]

然后：

var targetValue = "item3";
if (dataArray.indexOf(targetValue) != -1)....