CODEWITHSUNDEEP
jqueryimage
Paul G. Nahed
Paul G. Nahed

Reputation: 3

changing images

I want to make a movie theater online reservation system...I found a way to change seats from available to selected seats but it only work with one seat only I need a way to make many seats and each time the user click on a seat it will change to selected seat image

here is the code for 1 seat and it is working (i think the problem is with 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>

Upvotes: 0

Views: 307

Answers (1)

Ravi Y
Ravi Y

Reputation: 4376

Your issue is because you are assigning an ID to the img tag. If you have multiple elements with the same ID, it is invalid HTML and the jquery selectors will always pick only the first matching element. This is why it works for only one image.

You need make your ChangeImage a class and change your click function selector as well.

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 : (this change is accomodate if you will be adding the images dynamically using 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
});

Upvotes: 2

Related Questions