OnClick 使用 javascript 更改背景颜色

Question

我有 10 张卡片，每张卡片上都有一个 "yes" 和 "no" 按钮。我需要让人们可以 select 对每个人做出是或否的决定。每当你制作 "yes" selection 时，它的背景会变成绿色，但如果你 select "no"，"yes" 会关闭，"no" 会变成红色。我需要做到这一点，以便您可以在不影响另一张卡片的情况下在每张卡片上进行。 这意味着如果我 select 在第一个上是 select 然后在第二个上 select "no"，那么第一个上的 "yes" 应该仍然保留selected. 我找到了一个执行此操作的脚本，但它会影响其他卡的 selection。

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

只需重命名 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 3

看看 Working fiddle（在 Mozzila & Chrome & 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');
    }
});

希望这对您有所帮助。

Answer 4

相信这就是您要的效果。

$(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 5

像这样？

DEMO

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card1">
    <input type="button" id="yes_0" value="YES" />
    <input type="button" id="no_0" value="NO" />
</div>
<div class="card2">
    <input type="button" id="yes_1" value="YES" />
    <input type="button" id="no_1" value="NO" />
</div>
<div class="card3">
    <input type="button" id="yes_2" value="YES" />
    <input type="button" id="no_2" value="NO" />
</div>
<div class="card4">
    <input type="button" id="yes_3" value="YES" />
    <input type="button" id="no_3" value="NO" />
</div>

OnClick 使用 javascript 更改背景颜色

OnClick change background color with javascript

html

javascript

css

jquery

onclick