Question

我的问题非常简单。我试图通过仅使用vanilla JavaScript点击其中任何一个来切换2个元素id。

它适用于第一次单击以使用正确的CSS作为新ID，但之后，它似乎无法识别新ID的点击事件。这是一个简短的代码示例来说明这一点：

＆＃13;

document.addEventListener("DOMContentLoaded", function(){
    var blueSpin = document.getElementById("blue-spinner");
    var orangeSpin = document.getElementById("orange-spinner");
    blueSpin.addEventListener("click", function() {
        document.getElementById("h1").innerHTML = "You've Clicked Blue";
        blueSpin.setAttribute("id","orange-spinner");
        orangeSpin.setAttribute("id", "blue-spinner")
    });
    orangeSpin.addEventListener("click", function() {
        document.getElementById("h1").innerHTML = "You've Clicked Orange";
        orangeSpin.setAttribute("id", "blue-spinner");
        blueSpin.setAttribute("id", "orange-spinner");
    });
});

＆＃13;

h1, h2 {
	font-weight: bold;
	text-align: center;
	font-size: 45px;
	font-family: 'VT323', monospace;
	margin: 15px;
}
#blue-spinner {
	color: blue;
}
#orange-spinner {
	color: goldenrod;
}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<html>
    <body>
        <h1 id="h1">Click Something:</h1>
        <h2 id="blue-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2>
        <h2 id="orange-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2>
    </body>
</html>

＆＃13;

我的期望是，在点击任一个微调器时，颜色将会切换，标题将标识在更改之前单击了哪一个。之后，您应该可以单击任一个具有相同结果的微调器。

任何人都可以提供任何帮助将不胜感激！快乐的圣诞节前夜！

Answer 1

由于您更改了元素的ID，因此您必须在更改后更新代码。

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
    var blueSpin = document.getElementById("blue-spinner");
    var orangeSpin = document.getElementById("orange-spinner");

    var blueSpinClick = function() {
      document.getElementById("h1").innerHTML = "You've Clicked Blue";
      blueSpin.removeEventListener('click', blueSpinClick);
      orangeSpin.removeEventListener('click', orangeSpinClick);
      blueSpin.removeEventListener('click', blueSpinClick);

      blueSpin.setAttribute("id","orange-spinner");
      orangeSpin.setAttribute("id", "blue-spinner");

      blueSpin = document.getElementById("blue-spinner");
      orangeSpin = document.getElementById("orange-spinner");

      blueSpin.addEventListener("click", blueSpinClick);
      orangeSpin.addEventListener("click", orangeSpinClick);
    }
    document.getElementById("blue-spinner").addEventListener("click", blueSpinClick);

    var orangeSpinClick = function() {
      document.getElementById("h1").innerHTML = "You've Clicked Orange";
      orangeSpin.removeEventListener('click', orangeSpinClick);
      blueSpin.removeEventListener('click', blueSpinClick);

      blueSpin.setAttribute("id","orange-spinner");
      orangeSpin.setAttribute("id", "blue-spinner");

      blueSpin = document.getElementById("blue-spinner");
      orangeSpin = document.getElementById("orange-spinner");

      blueSpin.addEventListener("click", blueSpinClick);
      orangeSpin.addEventListener("click", orangeSpinClick);
    }
    document.getElementById("orange-spinner").addEventListener("click", orangeSpinClick);
});

＆＃13;

h1, h2 {
	font-weight: bold;
	text-align: center;
	font-size: 45px;
	font-family: 'VT323', monospace;
	margin: 15px;
}
#blue-spinner {
	color: blue;
}
#orange-spinner {
	color: goldenrod;
}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<html>
	<body>
		<h1 id="h1">Click Something:</h1>
		<h2 id="blue-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2>
		<h2 id="orange-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2>
	</body>
</html>

＆＃13;

Answer 2

我会在css中使用类选择器而不是id。这些方面的东西：

var btns = document.getElementsByClassName("btn");
for(var i = 0; i < btns.length; i++){
    btns[i].addEventListener("click", function(e) {
        var clss = e.target.getAttribute("class")
        if(clss === undefined || cls === null){clss = "";}
        if(cls.indexOf("blue-spinner") > -1){
            var output = "You clicked a blue spinner";
            e.target.setAttribute("class", "orange-spinner");
        }else{
            e.target.setAttribute("class", "blue-spinner");
            var output = "You clicked an orange spinner";
        }
        var h = document.getElementById("h1");
        h.innerHTML = output;
    });
}

使用JavaScript

2 个答案: