jQuery -同一个照明箱的多个实例

Question

我似乎有点问题，从同一页中的两个元素点击启动相同的灯箱.

我的html看起来像这样

<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>


<!-- Wrapper Start -->
<div id="tbc_wrapper">
    <div id="lightboxon">Load Template Editor 1</div>
        </br></br>
    <div id="lightboxon">Load Template Editor 2</div>
</div>
<!-- Wrapper End -->


<?Php
    include('instOneTb.php');
?>  
<script src="js/editor.js"></script>

</body>

这一行代码

<div id="lightboxon">Load Template Editor 1</div>

这一行代码

<div id="lightboxon">Load Template Editor 2</div>

每个都应该弹出一个lightbox的实例。

当我点击第一个，我得到的灯箱没有问题。当我点击第二个按钮时，什么都不会发生。

我知道在这里我应该学些什么？谢谢!

Answer 1

这是因为您使用的是相同的id. ids必须是唯一的。

使用class代替。

尝试：

<div class="lightboxon">Load Template Editor 1</div>

Answer 2

id必须是页面唯一的。

如果您希望事物具有相同的标识符，则使用类或其他属性来标识元素。

Answer 3

您在两个按钮中都使用了相同的ID。身份证应该是独一无二的，这似乎是你的问题。

你可以：

1)将ID更改为lightboxon1和lightboxon2，并更改JS以适应。你的JS可能看起来像这样：

<div id="lightboxon1">Load Template Editor 1</div>
<div id="lightboxon2">Load Template Editor 2</div>

$('#lightboxon1, #lightboxon2').click(function() {
    // open lightbox
});

2)将ID改为类。

<div class="lightboxon">Load Template Editor 1</div>
<div class="lightboxon">Load Template Editor 2</div>

$('.lightboxon').click(function() {
    // open lightbox
});