0

映画館のオンライン予約システムを作りたい... 空席から指定席に変更する方法を見つけたが、1 席のみでしか機能しない 多くの席を作成する方法が必要で、ユーザーが席をクリックするたびに選択した座席の画像に変わります

ここに1シートのコードがあり、機能しています（問題はIDにあると思います）

<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

問題は、imgタグにIDを割り当てているためです。同じIDを持つ要素が複数ある場合、それは無効なHTMLであり、jqueryセレクターは常に最初に一致する要素のみを選択します。これが、1つの画像に対してのみ機能する理由です。

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 に答える