修改

Question

我在这些li元素上通过JS更改了不透明度，这些元素只是ul元素中的正方形。无论如何，我想知道我是否可以来回切换不透明度，并且不能为我的生活找出方法。

<ul id='grid'>
    <li class="yellow" alt="yellow"></li>
    <li class="purple" alt="purple"></li>
    <li class="blue" alt="blue"></li>
    <li class="pink" alt="pink"></li>
    <li class="green" alt="green"></li>
    <li class="ygreen" alt="ygreen"></li>
    <li class="gray" alt="gray"></li>
    <li class="red" alt="red"></li>
</ul>

var grid = document.getElementById('grid');

    function changeOpacity(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target;
            clickedItem.style.opacity = '.5';
        }

        e.stopPropagation();
    }

    grid.addEventListener('click', changeOpacity, false);

我想在内部添加另一个if语句就像这样工作......

 function changeOpacity(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target;
            clickedItem.style.opacity = '.5';
        }

        e.stopPropagation();

        (clickedItem.style.opacity = '.5') ? clickedItem.style.opacity = '1';
    }

但我得到的是： Uncaught SyntaxError: Unexpected token ;

更新

function changeOpacity(e) {
        if (e.target !== e.currentTarget) {
            var clickedItem = e.target;
            clickedItem.style.opacity = '.5';
        }

        e.stopPropagation();

       (clickedItem.style.opacity === '.5') ? clickedItem.style.opacity = '1' : clickedItem.style.opacity = '.5';
    }

Answer 1

(clickedItem.style.opacity = '.5')应为(clickedItem.style.opacity === '.5')

您正在使用错误的相等运算符。但是，这不是语法错误的原因。

您收到语法错误，因为它不是完整的三元运算符。它应该看起来像：

condition ? answer1 : answer2

目前，您只有answer1。

也许您正在寻找的是：

clickedItem.style.opacity = clickedItem.style.opacity === '.5' ? '1' : '.5';

这是一个冗长的三元声明。我可能会建议你选择一个普通的if...else。更具可读性。

修改

尝试这样的事情（参见jsfiddle）：

var grid = document.getElementById('grid');

grid.addEventListener('click', changeOpacity, false);

function changeOpacity(e) {
    var el = e.target;

    if(el.classList.contains('half')) {
      el.classList.remove('half');  
    } else {
      el.classList.add('half');   
    }
}

CSS：

.half {
  opacity: .5;
}

通常最好只切换类而不是依赖于不一致的DOMElement样式对象。

我将类名的语义留给你（.half非常可怕）。

如何在JavaScript中以编程方式创建状态之间切换？

1 个答案:

修改