OnClick使用javascript更改背景色_Javascript_Jquery_Html_Css_Onclick

OnClick使用javascript更改背景色

javascript jquery html css

OnClick使用javascript更改背景色,javascript,jquery,html,css,onclick,Javascript,Jquery,Html,Css,Onclick,我有10张卡，每张卡上都有“是”和“否”按钮。我需要做出选择，以便人们可以在每个选项上选择是或否。无论何时选择“是”，其背景都会变为绿色，但如果选择“否”，则“是”将关闭，“否”将变为红色。我需要这样做，这样你就可以在每张卡上做，而不会影响到另一张卡。这意味着，如果我在第一个选项上选择“是”，然后在第二个选项上选择“否”，则第一个选项上的“是”仍应保持选中状态。我发现一个脚本可以这样做，但是它会影响其他卡的选择看起来您没有引用jquery库，$未定义 $document.readyfunct

我有10张卡，每张卡上都有“是”和“否”按钮。我需要做出选择，以便人们可以在每个选项上选择是或否。无论何时选择“是”，其背景都会变为绿色，但如果选择“否”，则“是”将关闭，“否”将变为红色。我需要这样做，这样你就可以在每张卡上做，而不会影响到另一张卡。这意味着，如果我在第一个选项上选择“是”，然后在第二个选项上选择“否”，则第一个选项上的“是”仍应保持选中状态。我发现一个脚本可以这样做，但是它会影响其他卡的选择

看起来您没有引用jquery库，$未定义

$document.readyfunction{ $'input[type=button]'。单击函数{ $'input[type=button]'.attr'class'；如果$this.val.toLowerCase=='是'{ $this.attr'class'，'turnGreen'； } 否则{ $this.attr'class'，'turnRed'； } }; }; .变红{ 背景色：红色； } 特格林先生{ 背景颜色：绿色； } .turnDefault{ 背景色：CCC； }

看起来您没有引用jquery库$is未定义

只需重命名ID，就不能对更多元素使用相同的ID

和参考Jquery

只需重命名ID，就不能将同一ID用于更多元素

和参考Jquery

看看Mozzila、Chrome和Internet Explorer中的测试

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

HTML:

希望这有帮助。

看看Mozzila、Chrome和Internet Explorer中的测试

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

HTML:

希望这能有所帮助。

我相信这就是您想要的效果

$document.readyfunction{ $'input[type=button]'。单击函数{ $this.addClass'active'； $this.sibles.removeClass'active'； }; }; .卡输入。激活：第n个类型1{ 背景：绿色； } .卡输入。激活：类型2的第n个{ 背景：红色； }

我相信这就是你想要的效果

$function{ $'input[type=button]'。单击函数{ var idx=this.id.split_uu1]；如果this.value==否{ $yes_uux+idx.removeClass'turnGreen'； $this.addClass'turned'； } 否则{ $no_uux+idx.removeClass'turnRed'； $this.addClass'turnGreen'； } }; }; .变红{ 背景色：红色； } 特格林先生{ 背景颜色：绿色； } .turnDefault{ 背景色：CCC； } 像这样

你在用身份证…你不能这么做。可能不相关。我在代码段中添加了jquery，id在文档中应该是唯一的。你到底想要什么？根据我对你问题的理解，它很好用吗？比利，每当我点击另一张卡片时，前一张不应该受到影响。这意味着，如果我在第一个选项上选择“是”，然后在第二个选项上选择“否”，则第一个选项上的“是”仍应保持选中状态。但您将它们删除为“$'input[type=button]”。removeClass“turnRed”@Grigori查看我的答案。这正是你想要的。你在使用ID…你不能这么做。可能不相关。我在代码段中添加了jquery，id在文档中应该是唯一的。你到底想要什么？根据我对你问题的理解，它很好用吗？比利，每当我点击另一张卡片时，前一张不应该受到影响。这意味着，如果我在第一个选项上选择“是”，然后在第二个选项上选择“否”，则在第一个选项上选择“是”

其中一个应该仍然处于选中状态。但是您将它们删除$'input[type=button]'。removeClass'turnRed'@Grigori看看我的答案。这正是你想要的。我在原始文档中引用了，但这不是问题所在。这个函数做的不对。我建议你不要使用最新的jQuery，以防有人在使用IEQ。你也可以删除完整的类吗？在这种情况下，我会这样做，因为没有理由不这样做。我在原始文档中引用过，但这不是问题所在。这个函数做的不对。我建议你不要使用最新的jQuery，以防有人在使用IEQ。你也可以删除整个类吗？在这种情况下，我会这样做，因为没有理由不这样做。这取决于你检查的浏览器！在最后一款chrome中，它运行良好！没有理由否决投票！也许店主可以解释他想用什么浏览器让它工作！我没有投反对票。问题是它可以工作，但它的功能与我想要实现的结果不同。不是你，@Paulie_D，请告诉我你在哪个浏览器中工作？我在使用Chrome。“是”按钮不会变为绿色。它们变为红色。这取决于您在哪个浏览器中检查！在最后一款chrome中，它运行良好！没有理由否决投票！也许店主可以解释他想用什么浏览器让它工作！我没有投反对票。问题是它可以工作，但它的功能与我想要实现的结果不同。不是你，@Paulie_D，请告诉我你在哪个浏览器中工作？我在使用Chrome。“是”按钮不会变为绿色。它们变红了。是的，它变红了，只是错过了CSS。你在否决票上的速度惊人，不是吗？看到fiddleI删除了DV…忘记添加JQ了吗？是的，只是错过了CSS。你在否决票上的速度惊人，不是吗？看到Fiddle了吗？我删除了DV…忘了在SO？nth of type>=IE 9中添加JQ-但是我喜欢兄弟姐妹是的，但是有很多方法可以做CSS。我刚用过一个。本可以给他们不同的类，这样做，但这似乎有点整洁。n-of-type>=IE 9-但我喜欢兄弟姐妹是的，但有很多方法可以做CSS。我刚用过一个。本可以给他们上不同的课，这样做，但不知怎么的，这看起来更整洁。

<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>

<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>

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