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＆amp; D＆amp;按钮不起作用。我哪里出错

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

**不是很好工作了 - 在（＆＃34;文本＆＃34;）和括号错误之后丢失了逗号，应该在前面关闭 - if（num＆lt; = 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));
}
};

如果解决方案已经修改

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

你可以非常轻松地使用regexp来解决问题。

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的{{1}}将触发第三个条件（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');

Answer 2

将标准值放入数组中。

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

然后：

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

编写比较值的简短方法

2 个答案:

额外信用