Question

我正在尝试使用jQuery制作一个简单的Rock，Paper，Scissors游戏。当用户做出选择并单击一个按钮时，我希望其他按钮消失。这就是我尝试过的：

$('.choice1').on('click', function () {
    $(this).css('background-color', 'red')
    if ($('.choice1').css('background-color') != 'red') {
        $(this).hide();
    }
})

当我尝试运行它时，无论我按下哪个按钮都会消失。我该怎么做才能解决这个/我做错了什么？我正在考虑使用for循环迭代按钮，但我不知道该怎么做。

这是HTML：

    <div id="main">
        <div class="col-md-6">
            <h3>Computer's Choice:</h3>
            <div class="choices">
                <button class="choice btn btn-submit">Rock</button>
                <button class="choice btn btn-submit">Paper</button>
                <button class="choice btn btn-submit">Scissors</button>
            </div>
        </div>
        <div class="col-md-6">
            <h3>Player's Choice:</h3>
            <div class="choices">
                <button class="choice1 btn btn-submit">Rock</button>
                <button class="choice1 btn btn-submit">Paper</button>
                <button class="choice1 btn btn-submit">Scissors</button>
            </div>
        </div>
    </div>

Answer 1

你可以做这样的事情

$('button').on('click', function(){
 var $this = $(this);
 $this.addClass('active');
 $('button').not($this).hide();
});

.active {
  background-color:red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Rock</button>
<button>Paper</button>
<button>Scissors</button>

Answer 2

给他们所有相同的类名并隐藏不（$（this））：

<div class="choice1">
Rock
</div>
<div class="choice1">
Paper
</div>
<div class="choice1">
Scissors
</div>

$('.choice1').on('click', function () {
   $('.choice1').not($(this)).hide();
})

Fiddle here

Answer 3

如果元素是彼此的兄弟，则可以通过选择所单击元素的兄弟来隐藏它们。

$(document).ready(function() {
  $(".option").click(function() {
    $(this).siblings().css("opacity", 0);
  })
})

.option {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: 15px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
</div>

Answer 4

以下是适合您的演示。我完全通过使用类变化来完成它，这使得它变得清晰和聪明。简单的定义是我用一个通常用于三者的类来设置它们。然后我创建了一个名为“hide”的类。该类只显示：无值。我用函数var捕获被点击的元素并添加所有这些隐藏类然后从catched中删除hide类。

View Demo

jQuery：使尚未点击的项目消失

4 个答案: