0

一連のチェックボックスがあります。探しているのは、チェックされたときに「data-keyword」変数があることです。テーブルの行（）内の文字列内でその変数を検索し、見つかったかどうかに応じてその行を表示または非表示にできるようにする必要があります。

チェックボックスのレイアウト：

<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 に答える