列表项未被jQuery隐藏功能隐藏

时间:2015-01-08 15:02:38

标签: javascript jquery

我已经在我的网站上添加了排行榜功能,但不幸的是,排行榜的最低分数功能并没有完全发挥作用。

所以我创建了一个触发setMinScore函数的select元素,该函数查看每个列表元素并在其input.dial-list包含小于最小分数的值时隐藏它 - 基本上我只想显示列表项分数高于最低分数。

然而,当我选择除80和90之外的任何最低分数时,我的两个分数为“8”的列表项仍会显示在列表中(例如,如果我选择70,则列表项会显示,尽管它们有输入值小于70;但如果我选择80或90,则不再显示这些项目,因此功能仅适用于80和90)。

<select name="candList<?php echo $job['jobId']; ?>" onchange="setMinScore(this)">
 <option value="0">0</option>
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="30">30</option>
 <option value="40">40</option>
 <option value="50" selected>50</option>
 <option value="60">60</option>
 <option value="70">70</option>
 <option value="80">80</option>
 <option value="90">90</option>
</select>

<li>
 <span class="list-content">
 <div class="dial-list-holder">
  <input type="text" value="<?php echo $row['score']; ?>" class="dial-list">
 </div>
 <div class="dial-list-holder">
  <input type="text" value="<?php echo $row['matchScore']; ?>" class="dial-list-match">
 </div>
 <div class="name">
  <h5><?php echo $row['name']; ?></h5>
 </div>
 </span>
</li>

这是javascript函数:

function setMinScore(selectEl)
{
 var minScore = $(selectEl).val();
 var candList = "."+$(selectEl).attr('name');

 $(candList).find('li').each(function() {

 if($(this).find('input.dial-list').val() < minScore) { 
  $(this).hide();  
 } 
 else { 
  $(this).show();    
 }
 });
}

谢谢大家,非常感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我会在select元素中添加一个id并获取所选的值:

var minScore = $("#id option:selected").val();

而不是你的:

var minScore = $(selectEl).val();