Question

我正在尝试为选中的每个单选按钮添加不同的类。那就是说，如果我点击按钮No3按钮No1应该得到tclass1而按钮No2应该得到tclass2 ...等等如果选择了其他按钮。

这是一个示例代码

<form>
    <ul>
        <li>
            <input id="radio1" type="radio" name="radio[]" value="1">
            <label for="radio1">one</label>
        </li>
        <li>
            <input id="radio2" type="radio" name="radio[]" value="2">
            <label for="radio2">two</label>
        </li>
        <li>
            <input id="radio3" type="radio" name="radio[]" value="3">
            <label for="radio3">three</label>
        </li>
        <li>
            <input id="radio4" type="radio" name="radio[]" value="4">
            <label for="radio4">four</label>
        </li>
        <li>
            <input id="radio5" type="radio" name="radio[]" value="5">
            <label for="radio5">five</label>
        </li>
    </ul>

这是我使用的脚本

$(document).ready(function(e) {
    $("input[type=radio]").click(function(){

    //I use these two lines to clear the last class if exists on each radio button before adding scpecific ones but it does not work
    var lastClass = $(this).closest("ul").find("li label").attr('class').split(' ').pop();
        $(this).closest("ul").find("li label[class*=tclass]").removeClass(lastClass);

        //here I add specific classs to each radio
        $(this).closest("li").prevAll("li").each(function(i) {
            i++;
            $(this).find("label").addClass("tclass" + i);
        });
    });  
});

这是演示 FIDDLE DEMO

据我所知，问题在于删除类。任何帮助将不胜感激:(

Answer 1

如果我正确理解你的问题，那就是在一组元素上添加和删除动态类名。

我建议在确定元素的相关类名时使用相同的方法，无论您是要删除还是添加它。

看看这种方法：

＆＃13;

$(document).ready(function(e) {

  // Takes a selection index, an element, and the element's index
  // Removes or adds a classname to the element's label based on 
  // comparing its own index to the selection's index.
  var modifyClass = function(selectedIndex, element, index) {
    var needsClass = index < selectedIndex;
    $(element)
      .next("label")
      .toggleClass("tclass" + (index + 1), needsClass);
  }

  $("input[type=radio]").click(function() {
    var radioBtns = $("input[type=radio]");
    var checked = radioBtns.index(this);
    var btnArray = radioBtns.toArray();

    // For each radio button, check if it needs a class (index < selected index)
    // and add or remove the right class name
    btnArray.forEach(modifyClass.bind(null, checked));
  })
});

＆＃13;

form {
  max-width: 500px;
  margin-top: 25px;
}
form ul li {
  display: inline-block;
  width: 20%;
  text-align: center;
  vertical-align: top;
  float: left;
  position: relative
}
input {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -6px;
  display: none;
}
input[type=radio]:checked + label::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -12px 0 0 -15px;
  background-color: green;
}
input[type=radio] + label::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -12px 0 0 -15px;
  background-color: gray;
}
label {
  padding-top: 55px;
}
/*this class should be added*/

input[type=radio] + label.tclass1::before {
  background-color: yellow;
}
input[type=radio] + label.tclass2::before {
  background-color: orange;
}
input[type=radio] + label.tclass3::before {
  background-color: red;
}
input[type=radio] + label.tclass4::before {
  background-color: blue;
}
input[type=radio] + label.tclass5::before {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <ul>
    <li>
      <input id="radio1" type="radio" name="radio[]" value="1">
      <label class="test" for="radio1">one</label>
    </li>
    <li>
      <input id="radio2" type="radio" name="radio[]" value="2">
      <label class="test" for="radio2">two</label>
    </li>
    <li>
      <input id="radio3" type="radio" name="radio[]" value="3">
      <label class="test" for="radio3">three</label>
    </li>
    <li>
      <input id="radio4" type="radio" name="radio[]" value="4">
      <label class="test" for="radio4">four</label>
    </li>
    <li>
      <input id="radio5" type="radio" name="radio[]" value="5">
      <label class="test" for="radio5">five</label>
    </li>
  </ul>
</form>

＆＃13;

Answer 2

看看这个，

    $(document).ready(function() {
      $("input[type=radio]").click(function(){
        var counter = 0;
        var found = false;
        $("input[type=radio]").each(function()
        {
          counter++;
          if(found)
          {
            $(this).next("label").removeClass("tclass"+counter);
          }
          else
          {
            $(this).next("label").toggleClass("tclass"+counter,true);
            if($(this).is(':checked'))
            {
              found = true;
            }
      }
    });
});
});

https://jsfiddle.net/8jct6tfs/14/

我认为这就是你想要的。如果某些事情不起作用或不是你的意思，请告诉我。

将不同的类添加到选中的按钮之前的所有单选按钮

2 个答案: