Question

我正在使用jQuery创建一个进度条但问题是我将JQuery与组件的id连接但是只要我创建具有相同id的新组件，它就不起作用。解决它的方法是什么？我正在附加我的HTML代码＆amp; CSS。所有其他文件都是常见的jQUERY库。

<body>
<script >
$(function(){

    $("#status").animate( { width: "80%" }, 2000);

});
</script>

<div id="progress-bar">
   <div id="status"  ></div>
</div>
<div id="progress-bar">
   <div id="status" ></div>
</div>

CSS文件

#progress-bar {
    border: 2px outset #FFFFFF;
    background: #E1C555;
    width: 500px;
    height: 30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

#status {
    background: #EC1414;
    width: 10%;
    height: 30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

Answer 1

您只能拥有一个具有给定ID的html元素。那就是 id必须是唯一的。如果您希望使用相同的名称选择多个html元素，请使用类。

使用您的代码：

<script >
$(function(){

    $(".status").animate( { width: "80%" }, 2000);

});
</script>

<div class="progress-bar">
   <div class="status"  ></div>
</div>
<div class="progress-bar">
   <div class="status" ></div>
</div>

Answer 2

不允许两次使用相同的ID。

您必须使用唯一的ID或类。

jQuery组件的相同ID正在创建问题

2 个答案: