Question

我有多个具有不同值的单选按钮。我想按照此顺序value或id对这些按钮进行排序：

FedEx Ground
UPS Ground
自定义1
自定义2

由于所有选项的类和名称相同，因此值和ID不同。我尝试过使用JavaScript但除了使用升序，降序和随机排序之外，我无法弄清楚如何按值自定义顺序对选项进行排序。

<ul id="shipping_method">
 <li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_1" value="booster_custom_shipping_1" class="shipping_method" checked="checked">
  <label for="shipping_method_custom_shipping_1">Custom 1:</label>
 </li>
 <li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_2" value="booster_custom_shipping_2" class="shipping_method">
  <label for="shipping_method_custom_shipping_2">Custom 2:</label>
 </li>
 <li>
  <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_3" value="FedEx - FedEx Ground" class="shipping_method">
  <label for="shipping_method_fedex_ground">FedEx Ground:</label>
 </li>
 <li>
   <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_4" value="UPS - UPS Ground" class="shipping_method">
   <label for="shipping_method_ups-ground">UPS Ground:</label>
 </li>
</ul>

Answer 1

自定义排序功能可以...例如：

.sort(function(a, b) {
    if(a.value === b.value)
        return 0;

    switch(a.value) {
        case 'FedEx - FedEx Ground':
            return -1;
        case 'UPS - UPS Ground':
            if(b.value === 'FedEx - FedEx Ground')
                return 1;
            else
                return -1;
        case 'booster_custom_shipping_1':
            if(b.value === 'FedEx - FedEx Ground' || b.value === 'UPS - UPS Ground')
                return 1;
            else
                return -1;
        default:
            return 1;
    }
});

Answer 2

创建一个排序对象，在那里查找值，并根据它进行排序：

var ordering = {
  "FedEx - FedEx Ground":      1,
  "UPS - UPS Ground":          2,
  "booster_custom_shipping_1": 3,
  "booster_custom_shipping_2": 4
};

$('#shipping_method > li').
  sort(
    function(a, b) {
      // for each <li>, get the value of the <input> it contains
      // look up that value in `ordering`, and use that for comparison
      //
      return ordering[ $('input', a).val() ] - ordering[ $('input', b).val() ];
    }
  ).
  each(
    // appending each element in sorted order leaves a sorted list behind
    //
    function() {
      $('#shipping_method').append(this);
    }
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="shipping_method">
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_1" value="booster_custom_shipping_1" class="shipping_method" checked="checked">
    <label for="shipping_method_custom_shipping_1">Custom 1:</label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_2" value="booster_custom_shipping_2" class="shipping_method">
    <label for="shipping_method_custom_shipping_2">Custom 2:</label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_3" value="FedEx - FedEx Ground" class="shipping_method">
    <label for="shipping_method_fedex_ground">FedEx Ground:</label>
  </li>
  <li>
    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_4" value="UPS - UPS Ground" class="shipping_method">
    <label for="shipping_method_ups-ground">UPS Ground:</label>
  </li>
</ul>

在自定义订单中对输入值进行排序

2 个答案: