函数没有被调用，我需要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