Question

我有10张牌，每张牌上都有“是”和“否”按钮。我需要这样做才能让人们在每个人身上选择是或否。每当你做出“是”选择时，它的背景会变成绿色，但如果你选择“否”，则“是”将关闭，“否”将变为红色。我需要做到这一点，这样你就可以在每张卡上做到而不影响另一张卡。 这意味着如果我在第一个上选择“是”，然后在第二个上选择“否”，则第一个上的“是”仍应保持选中状态。我找到了一个执行此操作的脚本它会影响其他卡片的选择。

Answer 1

看起来你没有引用jquery库$ is not defined

$(document).ready(function () {
    $('input[type="button"]').click(function() {
      $('input[type="button"]').attr('class', '');
      if ($(this).val().toLowerCase() == 'yes') {
        $(this).attr('class', 'turnGreen');
      }
      else {
        $(this).attr('class', 'turnRed');
      }
	});
});

.turnRed {
   background-color: red;
  }

.turnGreen {
   background-color: green;
  }

.turnDefault {
   background-color: #CCC;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card1">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>


<div class="card2">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>


<div class="card3">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>

<div class="card4">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>

Answer 2

我相信这是你正在寻找的效果。

$(document).ready(function () {
    $('input[type="button"]').click(function(){
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
	});
});

.card input.active:nth-of-type(1) {
  background: green;
}

.card input.active:nth-of-type(2) {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

Answer 3

喜欢这个吗？

DEMO

../edit.php

$(function () {
    $('input[type="button"]').click(function () {
        var idx = this.id.split("_")[1];
        if (this.value=="NO") {
            $("#yes_"+idx).removeClass('turnGreen');
            $(this).addClass('turnRed');
        }
        else {
            $("#no_"+idx).removeClass('turnRed');
            $(this).addClass('turnGreen');
        }    
    });
});

.turnRed {
    background-color: red;
}
.turnGreen {
    background-color: green;
}
.turnDefault {
    background-color: #CCC;
}

Answer 4

只需重命名ID，您就无法将相同的ID用于更多元素http://jsfiddle.net/f4o564j1/

<div class="card1">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>


<div class="card2">
  <input type="button"  id="yes1" value="YES"/> 
  <input type="button" id="no1" value="NO"/>
</div>


<div class="card3">
  <input type="button"  id="yes2" value="YES"/> 
  <input type="button" id="no2" value="NO"/>
</div>

<div class="card4">
  <input type="button"  id="yes3" value="YES"/> 
  <input type="button" id="no3" value="NO"/>
</div>

并引用Jquery！

Answer 5

查看 Working fiddle （在Mozzila＆amp; Chrome＆amp; Internet Explorer中测试过）。

您必须按类更改yes/no ID，因为ID在当前文档中应该是唯一的：

HTML：

<div class="card1">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>


<div class="card2">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>


<div class="card3">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>

<div class="card4">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>

JS：

$('input[type="button"]').click(function(){
    if($(this).hasClass('no')){
        $(this).addClass('turnRed');
        $(this).parent().find('.yes').removeClass('turnGreen');
    }else{
        $(this).addClass('turnGreen');
        $(this).parent().find('.no').removeClass('turnRed');
    }
});

希望这有帮助。

OnClick使用javascript更改背景颜色

5 个答案: