Question

我有一组九个单选按钮，当我点击每个单选按钮时，我想要一个不同的类（avatar1，avatar2，avatar3，...）添加到id =＆＃34; avatar＆＃34;的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')
            }

但我必须对每个无线电按钮做同样的事情，这是一个很长的代码。有什么方法可以缩短它，例如循环？

Answer 1

您可以使用index：

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

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

Answer 2

使用您当前的标记，您可以从点击的无线电类名中获取类名，如

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

Answer 3

你可以试试这个

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

Answer 4

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

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

Answer 5

使您的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>

我更改了每个name

的radio button

你的jQuery喜欢这个

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

Answer 6

试试这个，你可以在使用Jquery

选择后简单地删除和添加类

＆＃13;

$(document).ready(function() {

  $("input").on("change", function() {

    $("div").removeClass();
    $("div").addClass($(this).attr("class"));
    alert("div class now is:"+$("div").attr("class"));

  });

});

＆＃13;

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

＆＃13;

Answer 7

使用以下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)
        }
        });
  });

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

7 个答案: