jQuery：每个单选按钮每个 addClass 到一个 div答案

【问题标题】：jQuery: each radio button each addClass to a divjQuery：每个单选按钮每个 addClass 到一个 div
【发布时间】：2017-11-29 00:08:48
【问题描述】：

我有一组九个单选按钮，当我单击每个单选按钮时，我想将不同的类（avatar1、avatar2、avatar3、...）添加到 id="avatar" 的 div。

<div class="ediar_avatar">
    <input type="radio" name="RadioGroup1" class="av1">
    <input type="radio" name="RadioGroup1" class="av2">
    <input type="radio" name="RadioGroup1" class="av3">
    <input type="radio" name="RadioGroup1" class="av4">
    <input type="radio" name="RadioGroup1" class="av5">
    <input type="radio" name="RadioGroup1" class="av6">
    <input type="radio" name="RadioGroup1" class="av7">
    <input type="radio" name="RadioGroup1" class="av8">
    <input type="radio" name="RadioGroup1" class="av9">
  </div>

我试过这个jquery：

jQuery('.av1').click(function(){
            if (this.checked) {
                $("#avatar").attr('class', '');
                $('#avatar').addClass('avatar1')
            }

但我必须对每个单选按钮执行相同的操作，这是一个很长的代码。有什么方法可以缩短它，例如使用循环？

【问题讨论】：

由于您使用同名RadioGroup1 作为收音机，因此一次只能选择一个收音机。

标签： jquery html css

【解决方案1】：

你可以使用index:

jQuery('[class^=av').on('change', function () {
    if ($(this).is(':checked')) {
        $("#avatar").removeAttr('class').addClass('avatar' + ($(this).index() + 1));
    }
});

演示：http://jsfiddle.net/3cx3m2fo/

【讨论】：

【解决方案2】：

使用您当前的标记，您可以从单击的收音机类名中获取类名，例如

jQuery('.ediar_avatar input:radio').click(function () {
    if (this.checked) {
        $("#avatar").attr('class', 'avatar1' + this.className.match(/\d+$/)[0]);
    }
})

【讨论】：

【解决方案3】：

你可以试试这个

jQuery('.av1').click(function(){
            if ($(this).is(":checked")) {
                $("#avatar").attr('class', '');
                $('#avatar').addClass('avatar1')
            }

【讨论】：

【解决方案4】：

试试这个，您可以在使用 Jquery 进行选择后简单地删除和添加类

$(document).ready(function() {

  $("input").on("change", function() {

    $("div").removeClass();
    $("div").addClass($(this).attr("class"));
    alert("div class now is:"+$("div").attr("class"));

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ediar_avatar">
  <input type="radio" name="RadioGroup1" class="av1">
  <input type="radio" name="RadioGroup1" class="av2">
  <input type="radio" name="RadioGroup1" class="av3">
  <input type="radio" name="RadioGroup1" class="av4">
  <input type="radio" name="RadioGroup1" class="av5">
  <input type="radio" name="RadioGroup1" class="av6">
  <input type="radio" name="RadioGroup1" class="av7">
  <input type="radio" name="RadioGroup1" class="av8">
  <input type="radio" name="RadioGroup1" class="av9">
</div>

【讨论】：

【解决方案5】：

使用以下 jQuery 代码：-

jQuery(document).ready(function(){
   jQuery("input[type='radio']").click(function(){
         if (this.checked) {
            currIndex = $(this).index();    
            currIndex = currIndex+1;    
            $(this).attr('class', '');
            $(this).addClass('avatar'+currIndex)
        }
        });
  });

【讨论】：

【解决方案6】：

您可以在选择器中使用input[name="RadioGroup1"] 并使用.index() + 1 来获取输入的索引

jQuery('input[name="RadioGroup1"]').click(function(){
            if (this.checked) {
                $("#avatar").attr('class', ''); 
                $('#avatar').addClass('avatar'+ (($(this).index()) + 1));
            }

【讨论】：

感谢您的回复。它完美地工作。你说的那一行没有必要，就是清理类属性，因为没有它，把所有类一个接一个地放到#avatar，最终无法识别哪个应该占上风。非常感谢：D

【解决方案7】：

让你的 HTML 像这样

<div class="ediar_avatar">
    <input type="radio" name="RadioGroup1[]" class="av1">
    <input type="radio" name="RadioGroup1[]" class="av2">
    <input type="radio" name="RadioGroup1[]" class="av3">
    <input type="radio" name="RadioGroup1[]" class="av4">
    <input type="radio" name="RadioGroup1[]" class="av5">
    <input type="radio" name="RadioGroup1[]" class="av6">
    <input type="radio" name="RadioGroup1[]" class="av7">
    <input type="radio" name="RadioGroup1[]" class="av8">
    <input type="radio" name="RadioGroup1[]" class="av9">
  </div>

我更改了您每个radio button 的name

你的 jQuery 是这样的

jQuery('.ediar_avatar input:radio').click(function () {
    if ($(this).is(':checked')) {
        $("#avatar").addClass('avatar' + $(this).index() + 1);
    }
})

【讨论】：