Question

我正在制作游戏中没有的东西和十字架，我无法找到如何在点击时更改img。

这是游戏场：

<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>

这是选择可以开始的玩家的功能：

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

这是startgame按钮的查询代码：

$("#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

为图片添加ID：

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

然后您可以在点击时更改图像，如

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

当然，您可以在没有ID的情况下执行此操作，但您可能想知道点击了什么图像。您也可以使用data属性实现此目的（例如）：

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

然后再做

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

Answer 2

如果要在点击时更改img，可以这样做：

使用#playfield img选择器，您可以访问所有表格的img。然后$(this)将允许您使用attr函数更改已使用您选择的img点击的img。

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 3

这可能适用于您的情况：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
  <li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
  </li>
  <li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
  </li>
  <li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
  </li>
</ul>

使用jQuery更改img

3 个答案: