Question

我在一个网站上工作，这个网站有几个不同颜色的盒子用div制作，我想用它们打开某些东西。无论是音乐，照片等。我使用JS生成随机数并使用数字来选择打开哪首歌，但我不知道如何将它附加到div本身。

</head>
<body style="background-color:#FFF;">
<div id="center">
<div id="header">
<div id="title"><h1>welcom3 :-)</h1></div>
    <div id="wrapper">
    <div id="redbox">
    </div>
    <div id="6box">
    </div>
    <div id="bluebox">
    </div>
    <div id="greenbox">
    </div>
    <div id="yellowbox">
    </div>
    <div id="yellowboxmargin">
    </div>
    <div id="yellowboxmargin">
    </div>
    <div id="yellowboxmargin">
    </div>
</div>
</div>
</body>
</html>

Answer 1

使用jQuery

 <div id="box1"></div>
 <script> 
   $(document).ready(function() {
     $("#box1").click(function(){
      yourfunc();
     }
   })
 </script>

Answer 2

如果您需要在没有jquery的情况下运行js代码，请使用此示例。

在头上：

<script>
function hello() { 
    // do something
}
</script>

身体：

<div onclick="hello()">Hello</div>

Answer 3

我会遵循 Buddhi Abeyratne 的建议并使用jQuery。当然，这只是一个猜测，但我想说，由于你的项目的性质，它会让你更容易。

jQuery有different methods将事件附加到alement上。在这种情况下，您可以使用快捷方式＆＃34; .click()＆＃34;。

我在这里留下一个片段：

＆＃13;

function do_something_cool(box)
{
    alert("I have code to make something awesome with " + box.attr("id"));
}

$(document).ready(function()
{
    $("#wrapper div").click(function() { do_something_cool($(this)); });
});

＆＃13;

body 
{
  background-color: #FFF;
}

.colored_box 
{
  height: 50px;
  width: 50px;
  margin: 5px;
}

#redbox
{
  background-color: red;
}

#bluebox
{
  background-color: blue;
}

#greenbox
{
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="center">
    <div id="header">
      <div id="title"><h1>welcom3 :-)</h1></div>
      <div id="wrapper">
        <div id="redbox" class="colored_box"></div>
        <div id="bluebox" class="colored_box"></div>
        <div id="greenbox" class="colored_box"></div>
      </div>
    </div>
  </div>
</body>

＆＃13;

但如果您决定不使用jQuery，那么您可以使用vanilla javascript：

window.onload = function()
{
  var boxes = document.getElementById("wrapper").getElementsByTagName("div");
  for (var i = 0; i < boxes.length; i++)
  {
    boxes[i].addEventListener("click", do_something_cool);
  } 
}

function do_something_cool(evt)
{
  alert("I have code to make something awesome with " + evt.target.id);
}

顺便说一下，我想这只是一个复制/粘贴的东西，但你忘了关闭一个 div 。

另外，请注意我在片段中如何分隔html，js和css。你应该避免使用内联js和css。

祝你好运！

单击div元素运行JS

3 个答案: