函數沒有被調用，我需要window.load嗎？

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用於ready事件。 我不確定這樣做是否更好。

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屬性即可獲得所需的結果。

 $(".sizeButton").click(function(){ $(this).css({'color':'blue'}); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id ="sizeButton1" class="sizeButton" >S </div> <div id ="sizeButton2" class="sizeButton" >M</div> <div id ="sizeButton3" class="sizeButton" >L</div>

函數沒有被調用，我需要window.load嗎？

問題描述

3 個解決方案

解決方案1
3 2015-06-04 10:16:36

解決方案2
0 2015-06-04 10:27:09

解決方案3
0 2015-06-04 10:28:00

函數沒有被調用，我需要window.load嗎？

問題描述

3 個解決方案

解決方案1 3 2015-06-04 10:16:36

解決方案2 0 2015-06-04 10:27:09

解決方案3 0 2015-06-04 10:28:00

解決方案1
3 2015-06-04 10:16:36

解決方案2
0 2015-06-04 10:27:09

解決方案3
0 2015-06-04 10:28:00