0

我想制作一个电影院在线预订系统......我找到了一种将座位从可用座位更改为选定座位的方法，但它只适用于一个座位我需要一种方法来制作多个座位，并且每次用户点击一个座位它将更改为选定的座位图像

这是 1 个座位的代码，它正在工作（我认为问题出在 ids 上）

<html>
<head>
</head>
<body>
<h1>Select Here:</h1>
<img id="ChangeImage" src="images/available_seat_img.gif"/>

<script src="js/jquery.js"></script> 
<script>
var image1 = 'images/available_seat_img.gif'; 
var image2 = 'images/selected_seat_img.gif'; 
$("#ChangeImage").click(function () { 
$(this).attr('src', function (index, currentSource)
 { return currentSource == image2 ? image1 : image2; }); }); 
 </script>
</body>
</html>
4

1 回答 1

2

您的问题是因为您正在为标签分配 ID img。如果您有多个具有相同 ID 的元素，则它是无效的 HTML，并且 jquery 选择器将始终只选择第一个匹配的元素。这就是为什么它只适用于一张图像。

您需要创建ChangeImage一个类并更改您的点击功能选择器。

HTML：

<h1>Select Here:</h1>
<img class="ChangeImage" src="images/available_seat_img.gif"/>
<img class="ChangeImage" src="images/available_seat_img.gif"/>
<img class="ChangeImage" src="images/available_seat_img.gif"/>
<img class="ChangeImage" src="images/available_seat_img.gif"/>
<img class="ChangeImage" src="images/available_seat_img.gif"/>

JQuery ：（如果您将使用 jquery 动态添加图像，则此更改可以适应）

$(document).on('click', '.ChangeImage',  function () {
    $(this).attr('src', function (index, currentSource) {
        return currentSource == image2 ? image1 : image2;
    });

    // do something else to mark the seat as resever
});
于 2013-01-28T17:15:48.810 回答