0

我有一系列复选框，我正在寻找的是当它被选中时它有一个“数据关键字”变量。我需要能够在表行 () 的字符串中找到该变量，并根据是否找到该行来显示或隐藏该行。

复选框布局：

<input type="checkbox" name="make" data-heading="Make" data-keyword="Acura" />
<label>Acura</label><span class="count">(585)</span> <br />
<input type="checkbox" name="make" data-heading="Make" data-keyword="Audi"  />
<label>Audi</label><span class="count">(319)</span> <br />
<input type="checkbox" name="make" data-heading="Make" data-keyword="BMW"  />
<label>BMW</label><span class="count">(958)</span> <br />

表格行布局：

<tr sn="8126789" v_loc="7279" index="0" class="car-search-result">
<td class="tcol-1"> <a name="8126789" /> <img class="clicked" data-thumbnail="/8126789-3-1-48f0a71c.jpg" src="/8126789-3-1-48f0a71c.jpg" alt="" /> </a> 
<div>
    <label> Compare </label> 
    <input type="checkbox" id="" class="compare_click" name="" />
</div>
</td>
<td class="tcol-2"> 
<h5 data-header="2006 Acura MDX ">
    <a href=""> 2006 Acura MDX </a> 
</h5>
<ul>
    <li><span>Leather Seats, 3rd Rear Seat, Sunroof(s)<a>more...</a></span></li>
</ul>
<ul class="list">
    <li> <label> Miles</label> </li>
    <li> <label> Drive</label>4WD </li>
    <li> <label> Trans</label>Automatic </li>
    <li> <label> MPG</label> </li>
    <li> <label> Exterior</label>Gray </li>
    <li> <label> Interior</label>Gray </li>
    <li> <label> 
    <div>
        8 Reviews 
    </div>
    </label> <img alt="4.8 out of 5" src="rating-4_8.gif"> </li>
</ul>
<div class="more_equipment">
    More equipment and specifications 
</div>
</td>
<td class="tcol-3"> 
<div class="res_sort_mileage" data-keyword="90K">
    90K 
</div>
</td>
<td class="tcol-4"> 
<div style="position:relative;">
    <div>
        <span class="res_sort_price" data-keyword="$16,599"> $16,599</span>
    </div>
    <div>
        Current Location<span class="res_current_location" data-keyword="location"> location</span>
    </div>
    <div class="btn_see_more_details">
    </div>
    <div class="btn_save_this_car">
    </div>
</div>
</td>
</tr>

不知道怎么设置，先谢谢了！

4

1 回答 1

1

我建议将data-keyword属性添加到表格行，如下所示

<tr data-keyword="Acura" ...

然后，您应该能够监听复选框上的点击，并在每次点击时切换该行的出现和消失。

$('input').live('click',function() {
    $('.car-search-result').each(function(i) {
        var keyword = $(this).attr('data-keyword');
        var checked = $('input[data-keyword="'+keyword+'"]').is(':checked');
        if(checked) { 
            $(this).show();
        } else {
            $(this).hide();            
        }
    });
}​);​

这是 jsFiddle 的链接，您可以在其中看到它的实际效果：http: //jsfiddle.net/Um7rC/

于 2012-08-22T19:04:20.230 回答