javascript - 写比较值的简短方法

Question

您好，有没有更短的方法来编写以下代码？

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

喜欢

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

因为我的 list 将超过 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") 之后缺少逗号并且括号在错误的位置，应该在前面 - 如果 (num <= 4)

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 解决方案

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 为 null。给定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 < 20)。

---

额外学分

代替这些重复的东西:

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'});
        }
    };
}