Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
有没有一种方法可以将以前单击过的元素存储在vanilla Javascript中_Javascript_Svg - Fatal编程技术网

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

有没有一种方法可以将以前单击过的元素存储在vanilla Javascript中,javascript,svg,Javascript,Svg,我知道我已经接近解决方案了,但也许我看错了。我希望我的关系SVG图表能够存储之前单击的元素,然后将其与下一个单击的元素进行比较 如果元素相同,则切换“已选择”以隐藏关系线。如果它们不同,则显示单击元素的行并隐藏上一个元素的行。如果没有上一个元素,则显示单击元素的行 不幸的是,现在它告诉我elementClicked是未定义的 var characterList = document.querySelectorAll('[id$="-image"]'); var e

我知道我已经接近解决方案了,但也许我看错了。我希望我的关系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;

                }

            });
        });

编辑:布莱恩,谢谢你在比较中的提醒!我改了。但问题仍然存在。

首先,我希望你们仔细看看你们的情况。在第一个条件中,您检查
是否(elementClicked==lastElementClicked){/*code here*/}
。在第二个
else if(elementClicked!=lastElementClicked&&/*此处的其他条件*/)
。但当
elementClicked==lastElementClicked
时,第二个条件将不会运行,因此,这部分条件无效:
elementClicked!=单击最后一个元素

其次,在从
else if
块中删除该条件后,我们将得到
else if(lastElementClicked.classList.contains('is-selected'))
,但在第一次运行后,lastElementClicked将等于undefined。如果元素未定义,则应跳过此块,例如:
else if(lastElementClicked&&lastElementClicked.classList.contains('is-selected'))
。如果您不仅要检查现有的元素,还要检查所需属性的类型和路径(查看
typeof
instanceof
Object.porotype.hasOwnProperty
,等等),那就更好了


我希望我解释得足够清楚,因为我记得我在理解js时遇到同样的问题。

您需要使用==进行比较(elementClicked=lastElementClicked将为elementClicked分配undefined,如果lastElementClicked未初始化)。谢谢,Bogdan!