Question

我现在有点头疼。

我正在尝试根据我传递给我的函数的URL参数过滤列表。

我试图解决的结果是，如果有人手动将URL参数更改为0，它将显示整个列表而不是隐藏所有列表项。

HTML

<select id="hof-accomp">
  <option value="0">Choose an Award</option>
  <option value="1">Rookie of The Year</option>
  <option value="2">MVP Award</option>
  <option value="3"> DPOY Award</option>
</select>

<ul class="gallery-wrap">
  <li>
     <div class="gallery-footer">
       <span class="counter awardYear hidden">1993</span>
       <span class="counter awardTitle" data-award="1">Rookie of The Year</span>
     </div>
  </li>
  <li>
     <div class="gallery-footer">
       <span class="counter awardYear hidden">1999</span>
       <span class="counter awardTitle" data-award="2">MVP Award</span>
     </div>
  </li>
  <li>
     <div class="gallery-footer">
       <span class="counter awardYear hidden">1993</span>
       <span class="counter awardTitle" data-award="3">DPOY Award</span>
     </div>
  </li>
</ul>

JQUERY

// gets and filters the URL parameter
function getURLParams(k){
  var p={};
  location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(s,k,v) {
    p[k]=v
  });
  return k ? p[k] : p
}

const awardParam = getURLParams('AwardID');

function awardFilter(awardParam){
  if(awardParam) {
    // Set the dropdown menu to the award name
    const filter = $('#hof-accomp')
                      .find("option[value='"+ awardParam +"']")
                      .prop("selected",true);

    // Filters inductees by URL Parameter
    $('.awardTitle').each(function() {
      let awardData = $(this).data('award');
      let awards = $(this).parentsUntil('.gallery-wrap');

      filter == 0 ? awards.removeClass('hidden') : awards.addClass('hidden');

      awardData != awardParam ? awards.addClass('hidden') : awards.removeClass('hidden');
    });
  }
}
awardFilter(awardParam);

Answer 1

更新的jQUERY

我发现有帮助的是接受URL参数来设置选项值。然后根据新的选择的选项

过滤列表

对我的功能进行了修正。

function awardFilter(awardParam){
  if(awardParam) {
  // Set the dropdown menu to the award name
    const awardSelected = $('#hof-accomp').find("option[value='"+ awardParam +"']").prop("selected", true);
    console.log(awardSelected);
    const filter = $('#hof-accomp').val();
    console.log(filter);
  // Filters inductees by URL Parameter
  $('.awardTitle').each(function(){
    let awardData = $(this).data('award');
    let awards = $(this).parentsUntil('.gallery-wrap');

  awardData == awardParam || awardData == filter ? awards.removeClass('hidden') : awards.addClass('hidden');
  });
 }
}

Answer 2

你的两个条件都错了。首先，你可以将它们结合起来。第二：filter == 0错了，因为从未发生过。 filter是一个jquery集合。您可以通过以下方式更改代码：

function awardFilter(awardParam){
  var awardParam = parseInt(awardParam, 10);
  if(awardParam>-1) {
    // Set the dropdown menu to the award name
    $('#hof-accomp')
        .find("option[value='"+ awardParam +"']")
        .prop("selected",true);

    // Filters inductees by URL Parameter
    $('.awardTitle').each(function() {
      let awardData = $(this).data('award');
      let awards = $(this).parentsUntil('.gallery-wrap');

      awardData != awardParam && awardParam > 0 ? awards.addClass('hidden') : awards.removeClass('hidden');
    });
  }
}
awardFilter(awardParam);

但是你可以缩短你的代码。为什么要自己迭代并选择每个项目？

function awardFilter(awardParam){
  var awardParam = parseInt(awardParam, 10);
  if(awardParam<0) return;
  // Set the dropdown menu to the award name
  $('#hof-accomp')
      .find("option[value='"+ awardParam +"']")
      .prop("selected",true);

  // Filters inductees by URL Parameter
  $('.gallery-wrap').children('li').addClass('hidden').filter(function(){
      return awardParam==0 || $(this).find('.awardTitle').data('award') == awardParam;
  }).removeClass('hidden');
}
awardFilter(awardParam);

jQuery URL参数隐藏列表项

2 个答案: