Question

我在这里有一些完美的javascript：

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

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

  $(".group-container").show();
  if (currentVal == 'popularity') {
  $('.group-container input[name="topseller"]').each(function (index, value){
  if($(this).val() == "0"){
        $(this).parent('.group-container').hide();
        //console.log(currentVal)
    }
    });
  } else if (currentVal == 'recently_ordered') {
    $('.group-container input[name="reorder"]').each(function (index, value){

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

</script>

但是，我想改变一件事。目前，它检查选择框的值和隐藏的输入名称，然后隐藏包含值为0的输入的div，并显示值为1的输入。

我想稍微重构一下，而不是隐藏div，只需重新排序它们，并基本上显示输入值为1且最后为0的div。所以没有隐藏/显示，而只是在页面顶部给予值1优先级的那个。我认为这应该是我的节目/隐藏剧本中的一个非常小的变化，但我不知道我应该怎么做。

使用HTML更新

<div>
   <span style="color:#fff;"><strong>Sort by:</strong></span>
        <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" >
        <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
                                      file
        <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="recently_ordered">Recently Ordered </option>
       </select>
    </div>

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

Answer 1

尝试$（this）.append（$（'。group-container'））而不是$（this）.parent（'。group-container'）。hide（）;

查看here了解更多详情。

更改JS显示/隐藏以重新排序

1 个答案: