Question

我试图重构我的Javascript / Jquery以使用选择选项和隐藏的输入值，以便对页面上的div进行排序。

目前，我的JS工作，但它隐藏了隐藏输入值为0的所有div。我想保留逻辑，但不是隐藏，只需重新排序div。

因此，如果用户从选择框中选择Recently_ordered，则隐藏输入值为1的任何div将首先显示，而0显示为0。基本上，所有项目都保留在页面上，但稍微重新排序。

这是目前隐藏的工作脚本：

<script type="text/javascript">
$(function(){

$('#filterText').on('change', function() {
  var currentVal = $(this).val();

  $(".group-container").show();

  if (currentVal == 'recently_ordered') {
    $('.group-container input[name="reorder"]').each(function (index, value){

        if($(this).val() == "0"){
                $(this).parent('.group-container').hide();
            }
      });
    }
  });
});

</script>

HTML的基本结构：

@foreach ($orderFormData->pgroups as $pgroup)
<div class="group-container">
        <input type="hidden" name="topseller" value="{{$pgroup->topseller}}" />
        <input type="hidden" name="reorder" value="{{$pgroup->reorder}}"/>

Answer 1

将.group-container元素作为数组抓取，根据其重新排序值对其进行排序，并按照数组的顺序将它们附加到DOM。

该片段非常详细，但应该提供足够的信息来遵循代码。

此代码段中使用的功能都应包含指向official documentation的链接或评论中Mozilla Development Network中的说明。

DOM中的“群组”包含提到的隐藏输入字段和一个额外的<p>元素，该元素显示topseller和reorder字段的值，这些字段应该更容易理解脚本的变化。

$(function() {
  $("#filterText").on("change", function() {
    var container = $(".container"),  // get the surrounding container, used for appending the sorted groups
        groups = $(".group-container").get(),  // grab the "groups" and make them a regular array
                                               // .get() -> https://api.jquery.com/get/
        currentVal = this.value;  // the value of the selected option
        
    groups
      // first we have to sort them in the "correct" order
      // Array.prototype.sort() -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
      .sort(function(left, right) {
        var topsellerValueLeft = parseInt(left.querySelector('input[name="topseller"]').value, 10),   // get the value of the topseller field and make it a number
            topsellerValueRight = parseInt(right.querySelector('input[name="topseller"]').value, 10), // get the value of the topseller field and make it a number
            // Element.prototype.querySelector -> https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
            // parseInt() -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
            // parseInt($(left).find('input[name="topseller"]').val(), 10)
            // parseInt($(right).find('input[name="topseller"]').val(), 10)
            // would yield the same result, but we don't need two full-blown jQuery objects just to get the value
            reorderValueLeft,
            reorderValueRight;
            
        // in case of "recently ordered" we sort the groups on their reorder value
        if (currentVal === "recently_ordered") {
          reorderValueLeft = parseInt(left.querySelector('input[name="reorder"]').value, 10);    // get the value of the reorder field and make it a number
          reorderValueRight = parseInt(right.querySelector('input[name="reorder"]').value, 10);  // get the value of the reorder field and make it a number
          
          // we have to check the reorder value only when the values are different
          if (reorderValueLeft !== reorderValueRight) {
            return reorderValueRight - reorderValueLeft;  // sort descending -> 1 ... 0
          }
        }
        
        // either we are not supposed to sort the items by their reordered value
        // or they have the same reordered value
        // hence we will then sort them on their topseller value
        // this time in ascending order
        return topsellerValueLeft - topsellerValueRight;
      })
      // now we append the elements to the DOM in the same order as we find them in the array
      // this will "remove" the groups one by one from the DOM and append it at their correct new spot
      // Array.prototype.forEach() -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
      .forEach(function(group) {
        container.append(group);  // .append() -> https://api.jquery.com/append/
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filterText">
  <option value="default">default</option>
  <option value="recently_ordered">recently ordered</option>
</select>
<br />
<div class="container">
  <div class="group-container">
    <p>1 | 1</p>
    <input type="hidden" name="topseller" value="1" />
    <input type="hidden" name="reorder" value="1" />
  </div>
  <div class="group-container">
    <p>2 | 0</p>
    <input type="hidden" name="topseller" value="2" />
    <input type="hidden" name="reorder" value="0" />
  </div>
  <div class="group-container">
    <p>3 | 1</p>
    <input type="hidden" name="topseller" value="3" />
    <input type="hidden" name="reorder" value="1" />
  </div>
  <div class="group-container">
    <p>4 | 0</p>
    <input type="hidden" name="topseller" value="4" />
    <input type="hidden" name="reorder" value="0" />
  </div>
</div>

（或jsfiddle.net）

排序或重新排序，而不是隐藏/显示

1 个答案: