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>

每个都应该打开灯箱的实例..

当我点击第一个时，我得到灯箱没问题。当我点击第二个时没有任何事情发生。

我知道在这里知道我应该学习什么？谢谢！

Answer 1

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

改为使用class。

尝试：

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

Answer 2

ID必须是页面唯一的。

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

Answer 3

您在两个按钮中都使用了相同的ID。 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
});

jQuery - 同一个灯箱的多个实例

3 个答案: