change an img using jQuery

289
January 30, 2017, at 03:22 AM

I am making the game noughts and crosses and I can't find how to change an img when it is clicked.

This is the gamefield:

<div id="playfield">
    <table border="0">
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
    </table>
</div>

This is the function that picks the player who can start:

var randomStart = Math.floor(Math.random() * 2);

and this is the query code for the startgame button:

$("#playfield tr td").click(function() {
    if ($(".game-button").html() == "Start game") {
        alert("you are not allowed to start");
    } else {
        if(randomStart == 0){
        } else {
        }
    }
});
Answer 1

If you want to change an img when it's clicked, you can do it this way:

With the #playfield img selector, you have access to all the img of your table. Then $(this) will allow you to change your img that's been clicked with the img of your choice with the attr function.

var randomStart = Math.floor(Math.random() * 2); 
 
$("#playfield img").click(function() { 
  $(this).attr('src', 'https://static.skyminds.net/jquery.png'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="playfield"> 
  <table border="0"> 
    <tr> 
      <td><img alt="" title="" src="img/empty.jpg" /></td> 
      <td><img alt="" title="" src="img/empty.jpg" /></td> 
    </tr> 
    <tr> 
      <td><img alt="" title="" src="img/empty.jpg" /></td> 
      <td><img alt="" title="" src="img/empty.jpg" /></td> 
    </tr> 
    <tr> 
      <td><img alt="" title="" src="img/empty.jpg" /></td> 
      <td><img alt="" title="" src="img/empty.jpg" /></td> 
    </tr> 
  </table> 
</div>

Answer 2

Add IDs to your images:

<img id="image1" alt="" title="" src="img/empty.jpg" />

Then you can change the image when clicked like

$("#image1").click(function () {
    $(this).prop("src", "img/image-that-should-appear.jpg");
});

Surely you can do this without IDs but you probably want to know what image was clicked. You can also achieve this (for example) by using the data attribute:

<img alt="" title="" src="img/empty.jpg" data-img-number="1" />

And then do

$("#playfield img").click(function() {
    var img_number = $(this).data("img-number");
    // change the image based on that information
});
Answer 3

This might work in your case:

$('#playfield tr td').click(function() {
    newImageSrc = 'img/newImage.png';
    $(this).children().attr('src', newImageSrc);
})
READ ALSO
add Export Button Group to yajra datatable laravel package

add Export Button Group to yajra datatable laravel package

I am using yajra laravel datatables package version 60 and I want to add export button group But I do not know how can I implement that

341
Symfony check box with action

Symfony check box with action

I using symfony and have template with array with some entities array, and need create in for in check box for all entity and when checked some entities and click ready go to action with ids(from all check box) - example - taskExecutionid

301
How to use javascript package with Django?

How to use javascript package with Django?

I'm a beginner and not understanding how to use the Slick javascript library with Django: https://githubcom/kenwheeler/slick

276
Merge two Ajax form for 3rd recommended result

Merge two Ajax form for 3rd recommended result

In my wordpress website i have two Ajax form on the same pageBoth have separate HTML, Script & PHP

206