Question

我试图在点击项目时更改项目的CSS样式。

ryan.js

function ryanClicked(id){
    document.getElementById(id).style.color = "blue";
    alert("Asdsa");
}

product.html

<head>
    <script src="ryan.js"></script>
</head>
<body>
    <div id ="sizeButton1"class="sizeButton" onclick="ryanClicked(sizeButton1)"> S </div>
    <div id ="sizeButton2"class="sizeButton" onclick="ryanClicked(sizeButton2)"> M </div>
    <div id ="sizeButton3"class="sizeButton" onclick="ryanClicked(sizeButton3)"> L </div>

我认为我需要某处onReady或onLoad？我有一段时间没有做过js。我的页面包含了Jquery，所以我可以使用jquery来准备事件。我不确定这样做会不会更好。

Answer 1

试试这个，你不需要将id传递给你的函数，而是可以传递this（指的是被点击的元素），

function ryanClicked(el) {
  el.style.color = "blue";
}

<div id="sizeButton1"class="sizeButton" onclick="ryanClicked(this)">S</div>
<div id="sizeButton2"class="sizeButton" onclick="ryanClicked(this)">M</div>
<div id="sizeButton3"class="sizeButton" onclick="ryanClicked(this)">L</div>

Answer 2

如果您使用的是jQuery，您可能更喜欢：

<div id ="sizeButton1" class="sizeButton"> S </div>
<div id ="sizeButton2" class="sizeButton"> M </div>
<div id ="sizeButton3" class="sizeButton"> L </div>

和

$(".sizeButton").on("click", function() {
    $(this).css("color", "blue")
})

https://jsfiddle.net/38ybvty8/

Answer 3

您可以在元素标记中传递id和onclick属性来获得所需的结果。

Cannot GET /

node server.js

函数没有被调用，我需要一个window.load吗？

3 个答案: