javascript - 我如何在以编程方式创建的 JavaScript 状态之间切换？

Question

我通过 JS 更改了这些 li 元素的不透明度，它们只是 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';
    }

但我得到的只是:未捕获的语法错误:意外的标记；

更新

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 真的很糟糕)。