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

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() { 
     $("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/

我想这是你想要的。我们或者我知道，如果有什么不工作心不是什么你的意思是

Answer 2

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

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

退房这种做法：

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