Question

嗨大家我在尝试将变量（val）设置为2个可能的对象属性之一时遇到了麻烦。以下代码解释了我正在尝试做的事情。

function myFnct(elem, imgSrcType) {
  var val = imgSrcType == "bg" ? elem.style.backgroundImage : elem.src;  
  val  = 'image.jpg'  
}

我正在使用三元运算符来避免写：

if (imgSrcType === "bg") {
    elem.style.backgroundImage = "url('image.jpg')";
}
else {
    elem.src = "image.jpg";
}

基本上'val'变量未正确设置，因为我猜它与elem对象有关。我试图避免使用if语句，因为我需要在函数中使用它几次。而且我想保持尽可能干。

任何使用三元运算符方法的帮助都会很棒！

Answer 1

if (imgSrcType === "bg") {
    elem.style.backgroundImage = "url('image.jpg')";
}
else {
    elem.src = "image.jpg";
}

丑陋但工作重写：

void (
      imgSrcType === 'bg' 
        && (elem.style.backgroundImage = "url('image.jpg')")
        || (elem.src = "image.jpg") 
);

等于：

void (
      imgSrcType === 'bg' 
        ? (elem.style.backgroundImage = "url('image.jpg')")
        : (elem.src = "image.jpg") 
);

因此，通过添加括号（ elem.src = "image.jpg" ），可以执行分配。您还可以使用逗号返回值赋值中的内容。

使用这些知识，您可以重写myFnct：

function myFnct(elem, imgSrcType) {
  var val = ( 
              void( imgSrcType == "bg" 
                     ? (elem.style.backgroundImage = "url('image.jpg')") 
                     : (elem.src = "image.jpg") ), //<= ternary done - comma
              'image.jpg' 
            );  
   //now val = 'image.jpg'
}

注意：这完全是关于可能的。如果您需要/希望保持代码可读，使用if ... else语句是更好的选择。

Answer 2

三元操作只能将结果分配给单个变量。如果要根据布尔表达式的结果将单个变量设置为不同的值，它们将非常有用。由于您尝试将图像URL分配给背景图像或源，因此不能使用简单的三元操作。其他答案是使用相当复杂/准混淆的代码来完成使用简单的if / else语句可以完成的任务。您的代码 - 尤其是对于这么简单的操作 - 应该易于阅读。所以，我建议坚持以下内容：

function setImage(elem, imgSrcType)
{
    var imgURL = "image.jpg";

    if(imgSrcType == "bg")
    {
        elem.style.backgroundImage = "url('" + imgURL + "')";
    }
    else
    {
        elem.src = imgURL;
    }
}

使用三元运算符设置对象的JavaScript变量时遇到问题

2 个答案: