Question

我有一个两部分的问题，我想创建一个石头剪刀布游戏，允许用户玩直到他输给计算机一次。我将向用户展示一系列图像（石头，纸张，剪刀）。然后，如果用户单击图像，我将突出显示该选择，然后双击以确认他们的选择。

因此，在用户单击“立即播放”后显示的HTML中有此代码：

<div id="playOptionsclassic" style="display: none">
    <img id="clickedRock" src="img/rock.jpg" onclick="playClassicWithRock()" dis/>
    <img id="clickedPaper" src="img/paper.jpg" onclick="playClassicWithPaper()"/>
    <img id="clickedScissors" src="img/scissors.jpg" onclick="playClassicWithScissors()" />
</div>

然后在我的Jquery文件中，我拥有：

$(function () {
    $("img").one("click",function() {
        $(this).css('border', "solid 2px red");
    });
});

我这里遇到的问题是用户现在可以单击多个img。我想要它来切换点击，所以如果我先点击岩石，哦，我改变主意了，我想要剪刀，非突出显示的岩石并突出显示剪刀。还是我只需要单击一下就可以锁定它？

然后如何将“ rock”，“ Paper” Scissors”的值传递到javascript文件中以查看它们是否击败了计算机？

Answer 1

使用$(this).siblings().css('border','0px')更改所单击项目的颜色，然后使用playClassicWithScissors(this)“ this”将元素传递给函数

$(function () {
    $("img").on("click",function() {
      $(this).siblings().css('border','0px')
        $(this).css('border', "solid 2px red");
    });
});

function playClassicWithRock(ele){
 alert($(ele).attr('id'));
}

function playClassicWithPaper(ele){
 alert($(ele).attr('id'));
 }
 
function playClassicWithScissors(ele){
 alert($(ele).attr('id'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playOptionsclassic" style="display: block">
    <img id="clickedRock" src="img/rock.jpg" onclick="playClassicWithRock(this)" dis/>
    <img id="clickedPaper" src="img/paper.jpg" onclick="playClassicWithPaper(this)"/>
    <img id="clickedScissors" src="img/scissors.jpg" onclick="playClassicWithScissors(this)" />
</div>

Answer 2

首先，您应该更喜欢将类用于单独的CSS样式。与调整CSS属性相比，添加和删除类通常更容易（并且在维护方面更为健壮）。

一个简单的方法是找到一个匹配所有三个图像的选择器。那么您可以在将其添加到单击的图像之前，从所有图像（无论是否具有）中删除“选定的”类。 jQuery使这非常容易。

另一种典型的方法是存储选择，因此您可以在选择新元素之前显式取消选择该元素。

Answer 3

<div id="playOptionsclassic" style="display: none">
    <img id="clickedRock" src="img/rock.jpg" class="game-opt-img" data-val="rock" dis/>
    <img id="clickedPaper" src="img/paper.jpg" class="game-opt-img" data-val="paper"/>
    <img id="clickedScissors" src="img/scissors.jpg" class="game-opt-img" data-val="scissors" />
</div>

然后在您的JavaScript中

$(function(){
    $(".game-opt-img").on("click", function() {
        $(".game-opt-img").off("click"); // remove all image's click event
        var val = $(this).data("val"); // get the value of the image that the user choose.
    });
});

Answer 4

您可以在CSS中创建一个名为.active的类，该类将边框添加到图像。因此，单击图像时，您需要做的就是从所有图像中删除.active类，然后将.active添加到您单击的图像中。

这可以通过执行以下操作来实现：

$(function() {
  $("#playOptionsclassic div").on("click", function() {
    $("#playOptionsclassic div").removeClass('active');
    $(this).addClass('active');
  });
});

.active {
  border: 2px solid red;
}

/* Styles for example */
#playOptionsclassic div {
  height: 100px;
  width: 100px;
  background: black;
  color: white;
  margin: 1%;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playOptionsclassic">
  <!-- Images replaced with divs for example -->
  <div id="clickedRock">Rock img</div>
  <div id="clickedPaper">Paper img</div>
  <div id="clickedScissors">Scissors img</div>
</div>

Answer 5

首先，您可以为每个图像添加一个预定义的类，并为它们表示的内容（岩石，纸张，剪刀）分配一个数据属性，如下所示：

<div id="playOptionsclassic" style="display: none">
    <img class="option" src="img/rock.jpg" data-option="rock"/>
    <img class="option" src="img/paper.jpg" data-option="paper"/>
    <img class="option" src="img/scissors.jpg" data-option="scissors"/>
</div>

然后您可以在CSS中创建一个类，在其中您将具有单击图像的样式：

.active {
    border: 2px solid red;
}

在您的JavaScript中，当用户单击其中一个选项时，将active类从其他选项中删除，并将其添加到该图像中。

然后双击它们，检查是否选择了一个选项并执行必要的操作。

$(function() {
    $("img.option").on("click", function() {
        $("img.option.active").removeClass("active");
        $(this).addClass("active");
    });

    $("img.option").on("dblclick", function() {
        var selectedOption = $("img.option.active");

        // Check if an option was selected.
        if (selectedOption.length) {
            // Save the name of the option (rock, paper or scissors) in a variable.
            var optionName = selectedOption.data("option");

            // Perform your action here.
        } else {
            alert("Please select an option.");
        }
    });
});

仅允许一项操作并将其记录在javascript

5 个答案: