在js中无法获取多个id值为demo的问题

例如代码中:

<script>
$(document).ready(function(){
  $("#demo").hover(function(){
    $("h1").css("background-color","yellow");
    },function(){
    $("h1").css("background-color","pink");
  });
});
</script>
</head>
<body>
<div id="demo">
<h1>酷炫模板 全新体验电商轻松走入微信</h1>
</div>
     
<div id="demo">
<h1>二维码轻松一扫有效统计粉丝来源.</h1>
</div>
 
<div id="demo">
----------------------
</div>

无法让第二个id=demo的div中的内容改变,这是为什么呢?

原因如下:

一个页面中元素的ID要保持唯一,你可以用class,name等其他属性表示
比如用class=“demo”
$(document).ready(function(){
  $(".demo").hover(function(){
    $("h1").css("background-color","yellow");
    },function(){
    $("h1").css("background-color","pink");
  });
});

猜你喜欢

转载自blog.csdn.net/weixin_38420342/article/details/81671508