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

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> 

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/

我想这就是你想要的。 让我知道某事是否无效或您的意思不是。