Question

我已经使用提示和警报在终端/控制台窗口中构建了岩石剪刀。我现在正在使用jQuery库将游戏转换为可在Web浏览器中播放的内容。

为了实现这一点，我制作了每只手的图像：Rock paper＆amp;剪刀。现在，我希望用户单击其中一只手并将该移动分配给名为 move 的变量。这是我的代码：

HTML：

    <div class="grow pic">
      <img src="rock.png" class=id="rock" alt="rock" height="75" width="75">
    </div>

    <div class="grow pic">
      <img src="paper.png" id="paper" alt="paper" height="75" width="75">
    </div>
    <div class="grow pic">
      <img src="scissor.png" id="scissors" alt="scissors" height="75" width="75">
    </div>

我正在尝试实现的jQuery：

  var move;
  $( "#id" ).click(function() {
  move = $(this).attr('id');
  });

所以这里的问题是，我如何将图像的id分配给名为 move 的变量。我一直收到一条错误，上面写着“Uncaught ReferenceError：move is not defined（...）”。

Answer 1

这没有任何意义：

$( "#id" ).click(function() {

尝试选择ID值为“id”的元素。相反，目标图像是具有公共类的元素的后代：

$('.pic img').click(function() {

现在你的功能应该按原样运行。

Answer 2

你可以使用它：

$("div img").click(function(){
    var move = $(this).attr('id');
});

Answer 3

var move;
$( ".id" ).click(function() {
move = $(this).attr('id');
$('#result').html(move);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow pic">
<img src="rock.png" class=id id="rock" alt="rock" height="75" width="75">
</div>

<div class="grow pic">
<img src="paper.png" class=id id="paper" alt="paper" height="75" width="75">
</div>

<div class="grow pic">
<img src="scissor.png" class=id id="scissors" alt="scissors" height="75" width="75">
</div>

<div id=result></div>

针对班级

运行click事件

Answer 4

尝试

var move = document.getElementsByTagName(this).getAttribute("id");

将divs id分配给变量

4 个答案: