JavaScript减少了if-else循环

Question

我从无线电输入字段中获取值，效果很好！

我的问题是，如果我想获取的值不是来自所有字段，而是来自两个或三个字段，则我的脚本不起作用。

这是我的例子：

<script>

 /* View check boxes */
 var value_one = $('input[type=radio][name=value_one]:checked').data('value_one');
 var value_two = $('input[type=radio][name=value_two]:checked').data('value_zwei');
 var value_three = $('input[type=radio][name=value_three]:checked').data('value_three');
 var value_four = $('input[type=radio][name=value_four]:checked').data('value_four');

 if(value_one != ''){
  var result_one = ($(this).data("value_one") >= value_one == true);
 } else {
  var result_one = '';
 }

 if(value_two != ''){
  var result_two = ($(this).data("value_two") >= value_two == true);
 } else {
  var result_two = '';
 }

 if(value_three != ''){
  var result_three = ($(this).data("value_three") >= value_three == true);
 } else {
  var result_three = '';
 }

 if(value_four != ''){
  var result_four = ($(this).data("value_four") >= value_four == true);
 } else {
  var result_four = '';
 }

 /*
 Here begin my problem.
 */

 if(result_one && result_two && result_three && result_four){
 /*
  Do something
 */

 }
</script>

如果我想从三个字段获取值只是来自result_one＆amp;＆amp; result_two＆amp;＆amp; result_three它不起作用。如果我更换＆amp;＆amp;与||它不起作用。

如何设置＆amp;＆amp;如果我需要它只有三次？我需要一个主意，谢谢你！

这是我的HTML代码

<ul id="value_one">
 <li>value_one</li>
 <li><label for="minw01"><input type="radio" name="value_one" data-valu e_one="0" id="minw01"> egal</label></li>
 <li><label for="minw02"><input type="radio" name="value_one" data-value_one="5" id="minw02"> 5€</label></li>
 <li><label for="minw03"><input type="radio" name="value_one" data-value_one="10" id="minw03"> 10€</label></li>
 <li><label for="minw04"><input type="radio" name="value_one" data-value_one="15" id="minw04"> 15€</label></li>
 <li><label for="minw05"><input type="radio" name="value_one" data-value_one="25" id="minw05"> 25€</label></li>
 <li><label for="minw06"><input type="radio" name="value_one" data-value_one="26" id="minw06"> 26€ and more</label></li>
</ul>

<ul id="value_two">
 <li>value_two</li>
 <li><label for="lkost01"><input type="radio" name="value_two" data-value_two="1" id="lkost01"> egal</label></li>
  <li><label for="lkost02"><input type="radio" name="value_two" data-value_two="5" id="lkost02"> 5€</label></li>
  <li><label for="lkost03"><input type="radio" name="value_two" data-value_two="10" id="lkost03"> 10€</label></li>
  <li><label for="lkost04"><input type="radio" name="value_two" data-value_two="15" id="lkost04"> 15€</label></li>
  <li><label for="lkost05"><input type="radio" name="value_two" data-value_two="25" id="lkost05"> 25€</label></li>
  <li><label for="lkost06"><input type="radio" name="value_two" data-value_two="26" id="lkost06"> 26€ and more</label></li>
</ul>

<ul id="value_three">
 <li>value_three</li>
 <li><label for="essq01"><input type="radio" name="value_three" data-value_three="0" id="essq01"> egal</label></li>
 <li><label for="essq02"><input type="radio" name="value_three" data-value_three="1" id="essq02"> 1 Star</label></li>
 <li><label for="essq03"><input type="radio" name="value_three" data-value_three="2" id="essq03"> 2 Starts and more</label></li>
 <li><label for="essq04"><input type="radio" name="value_three" data-value_three="3" id="essq04"> 3 Starts and more</label></li>
 <li><label for="essq05"><input type="radio" name="value_three" data-value_three="4" id="essq05"> 4 Starts and more</label></li>
</ul>

<ul id="value_four">
 <li>value_four</li>
 <li><label for="portion01"><input type="radio" name="value_four" data-value_four="0" id="portion01"> egal</label></li>
 <li><label for="portion02"><input type="radio" name="value_four" data-value_four="1" id="portion02"> 1 Star</label></li>
 <li><label for="portion03"><input type="radio" name="value_four" data-value_four="2" id="portion03"> 2 Starts and more</label></li>
 <li><label for="portion04"><input type="radio" name="value_four" data-value_four="3" id="portion04"> 3 Starts and more</label></li>
 <li><label for="portion05"><input type="radio" name="value_four" data-value_four="4" id="portion05"> 4 Starts and more</label></li>
 </ul>

Answer 1

这里你可以使用for循环并使用结果也动态

for(var i=0;i<10;i++){
var val = $('input[type=radio][name=value_'+(i+1)']:checked').data('value_'+(i+1));
if(val != ''){
  var result = ($(this).data("value_"+(i+1)) >= val == true);
 } else {
   var result = '';
 }
}

Answer 2

那么你的代码应该做什么并不能提供足够的信息，但这应该会缩短它。

$("input:radio").change(function() {

  if ($("input:radio:checked").length > 2) { // Now 3 radio's has to be selected
    $("input:radio:checked").each(function() {
      var id = $(this).closest("ul").attr("id");
      var data = $(this).data(id);

      console.log(data)
    })
  }
})

$("input:radio").change(function() {

  if ($("input:radio:checked").length > 2) {
    $("input:radio:checked").each(function() {
      var id = $(this).closest("ul").attr("id");
      var data = $(this).data(id);

      console.log(data)
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="value_one">
  <li>value_one</li>
  <li><label for="minw01"><input type="radio" name="value_one" data-value_one="0" id="minw01"> egal</label></li>
  <li><label for="minw02"><input type="radio" name="value_one" data-value_one="5" id="minw02"> 5€</label></li>
  <li><label for="minw03"><input type="radio" name="value_one" data-value_one="10" id="minw03"> 10€</label></li>
  <li><label for="minw04"><input type="radio" name="value_one" data-value_one="15" id="minw04"> 15€</label></li>
  <li><label for="minw05"><input type="radio" name="value_one" data-value_one="25" id="minw05"> 25€</label></li>
  <li><label for="minw06"><input type="radio" name="value_one" data-value_one="26" id="minw06"> 26€ and more</label></li>
</ul>

<ul id="value_two">
  <li>value_two</li>
  <li><label for="lkost01"><input type="radio" name="value_two" data-value_two="1" id="lkost01"> egal</label></li>
  <li><label for="lkost02"><input type="radio" name="value_two" data-value_two="5" id="lkost02"> 5€</label></li>
  <li><label for="lkost03"><input type="radio" name="value_two" data-value_two="10" id="lkost03"> 10€</label></li>
  <li><label for="lkost04"><input type="radio" name="value_two" data-value_two="15" id="lkost04"> 15€</label></li>
  <li><label for="lkost05"><input type="radio" name="value_two" data-value_two="25" id="lkost05"> 25€</label></li>
  <li><label for="lkost06"><input type="radio" name="value_two" data-value_two="26" id="lkost06"> 26€ and more</label></li>
</ul>

<ul id="value_three">
  <li>value_three</li>
  <li><label for="essq01"><input type="radio" name="value_three" data-value_three="0" id="essq01"> egal</label></li>
  <li><label for="essq02"><input type="radio" name="value_three" data-value_three="1" id="essq02"> 1 Star</label></li>
  <li><label for="essq03"><input type="radio" name="value_three" data-value_three="2" id="essq03"> 2 Starts and more</label></li>
  <li><label for="essq04"><input type="radio" name="value_three" data-value_three="3" id="essq04"> 3 Starts and more</label></li>
  <li><label for="essq05"><input type="radio" name="value_three" data-value_three="4" id="essq05"> 4 Starts and more</label></li>
</ul>

<ul id="value_four">
  <li>value_four</li>
  <li><label for="portion01"><input type="radio" name="value_four" data-value_four="0" id="portion01"> egal</label></li>
  <li><label for="portion02"><input type="radio" name="value_four" data-value_four="1" id="portion02"> 1 Star</label></li>
  <li><label for="portion03"><input type="radio" name="value_four" data-value_four="2" id="portion03"> 2 Starts and more</label></li>
  <li><label for="portion04"><input type="radio" name="value_four" data-value_four="3" id="portion04"> 3 Starts and more</label></li>
  <li><label for="portion05"><input type="radio" name="value_four" data-value_four="4" id="portion05"> 4 Starts and more</label></li>
</ul>

Answer 3

您可以使用初始值为0的var计数。只要将值存储在var（例如result_one）中，就可以增加其值。然后，您可以使用此计数值来检查包含非空值的var的数量并对它们执行操作（通过使用添加if语句）。