javascript - 向选中的单选按钮之前的所有单选按钮添加不同的类

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

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

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

看看这个方法:

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

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

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