Question

我有一些带有选择框的现有代码，我正在查看选项值并将其与foreach循环中div的隐藏输入值相匹配。我按照我想要的方式工作（根据选择，如果隐藏输入的值为'0'，它将隐藏该div）。再次，show / hide完美无缺。

但是，我现在需要让它工作，以便如果值为'1'，它将预先添加那些受影响的div或首先显示它们。我以前从未使用过prepend或append，但由于某些原因我无法使用它。我尝试使用附加值'0'，但它只是隐藏了一切。我认为前置会更好。

这是以前的工作'隐藏'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>

这是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}}"/>

     //rest of the content here

新的JS我正在尝试，但没有采取行动：

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

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

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

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

        if($(this).val() == "1"){
                $(this).prepend('.group-container')            
            }
      });
  }
});
});

</script>

Answer 1

$（本）.prepend（ '基团的容器'）

这段代码只是在所选元素中添加文本“.group-container”。所以你会得到

 <input ....>.group-container</input>

如果您改为这样做：

$(this).prepend('<div class="group-container">);

您可以将它添加到现有元素的开头：

<input....><div class="group-container"></div></input>

我认为你想要的是“包装”：

$(this).wrap('<div class="group-container">');

哪个应该产生

<div class="group-container"><input.../></div>

http://api.jquery.com/wrap/

使用JS前置div而不是隐藏

1 个答案: