Question

我知道我已经接近解决方案，但也许我看错了。我希望我的关系SVG图表执行的操作是存储先前单击的元素，然后将其与单击的下一个元素进行比较。

如果元素相同，请切换“已选择”以隐藏关系线。如果它们不同，则显示被单击元素的行并隐藏上一个元素的行。如果没有先前的元素，请显示单击的元素的行。

不幸的是，现在它告诉我elementClicked是未定义的。

        var characterList = document.querySelectorAll('[id$="-image"]');
        var elementClicked;
        var lastElementClicked;
        [...characterList].forEach(function (characterImage) {
            characterImage.addEventListener("click", function(){

                elementClicked = characterImage;

                function toggleRelationship(element) {
                    element.firstElementChild.classList.toggle("is-selected");
                    element.nextElementSibling.classList.toggle("st0");
                }

                if (elementClicked == lastElementClicked) {

                    console.log("element is equal to last element");
                    toggleRelationship(elementClicked);

                } else if ( elementClicked != lastElementClicked && lastElementClicked.classList.contains("is-selected") ) {

                    console.log("element is not equal to last element");
                    toggleRelationship(lastElementClicked);

                } else {

                    console.log("element was clicked and is stored");
                    toggleRelationship(elementClicked);
                    lastElementClicked = elementClicked;

                }

            });
        });

编辑：感谢您的比较Brian！我改了问题仍然存在。

Answer 1

首先，我希望您仔细查看自己的状况。首先，您检查if (elementClicked == lastElementClicked) { /* code here */ }。在第二个else if (elementClicked != lastElementClicked && /* other conditions here */)。但是第二个条件不会在elementClicked == lastElementClicked的情况下运行，因此，这部分条件无用：elementClicke != lastElentClicked。

第二，从else if块中删除该条件后，我们将得到else if (lastElementClicked.classList.contains('is-selected'))，但是在第一次运行后，您的lastElementClicked将等于undefined。万一您的元素未定义，则应跳过此块，例如：else if (lastElementClicked && lastElementClicked.classList.contains('is-selected'))。如果您不仅要检查元素是否存在，甚至要检查所需属性的类型和路径，那就更好了（请查看typeof，instanseof，Object.porotype.hasOwnProperty等）。 / p>

我希望我能足够清楚地解释所有事情，因为我记得我在理解js时遇到同样的问题。

有没有一种方法可以将以前单击的元素存储在原始Javascript中

1 个答案: