Question

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

这里是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>

Answer 1

您的问题是因为您要为img标记分配ID。如果您有多个具有相同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
});

改变图像

1 个答案: