4

jQuery と HTML(テーブル) について少し助けが必要です。

Pls は私の jsfiddle ページを見て、私が何をしようとしているのかを確認してください。
http://jsfiddle.net/nori2tae/U25EK/

各 TD には特定の値 (01 から 06 まで) が含まれ、その値に関連する CLASS 名と、TABLE の上のボタンのリストがあります。ページが最初に読み込まれると、これらのボタンがすべて有効になり、すべての TABLE DATA が表示されます。

クリックしてボタンのオン/オフを切り替えると、jQuery でボタンのオン/オフ ステータスを監視し、ステータスが各テーブル行の値と一致する場合、jQuery で TABLE ROW をトグルスライド (表示/非表示) する必要があります。（私の下手な英語と説明で申し訳ありません...）

たとえば、button01 をオフにすると、row1 が非表示になります。次に、button4 と button6 をオフにすると、row5 が非表示になります。など、またはその逆...

HTML:

<ul id="listBtns">
<li><a href="#" class="on">01</a></li>
<li><a href="#" class="on">02</a></li>
<li><a href="#" class="on">03</a></li>
<li><a href="#" class="on">04</a></li>
<li><a href="#" class="on">05</a></li>
<li><a href="#" class="on">06</a></li>
</ul>

<table id="tblResult">
<thead>
    <tr>
        <th></th>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>row1</th>
        <td class="val01">01</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row2</th>
        <td class="val01">01</td>
        <td class="val02">02</td>
        <td class="val03">03</td>
        <td class="val04">04</td>
        <td class="val05">05</td>
        <td class="val06">06</td>
    </tr>
    <tr>
        <th>row3</th>
        <td class="val03">03</td>
        <td class="val05">05</td>
        <td class="val04">04</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row4</th>
        <td class="val02">02</td>
        <td class="val04">04</td>
        <td class="val05">05</td>
        <td class="val06">06</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row5</th>
        <td class="val04">04</td>
        <td class="val06">06</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row6</th>
        <td class="val03">03</td>
        <td class="val02">02</td>
        <td class="val04">04</td>
        <td class="val06">06</td>
        <td class="val05">05</td>
        <td></td>
    </tr>
</tbody>
</table>

JS:

$('#listBtns a').click(function() {
    $(this).toggleClass('on off');
    //and some function continues...
});

私は一種のスタックであり、非常に貧弱で非効率的なコード (おそらく完全には機能しない可能性があります...) しか考えられず、どの jQuery セレクターを使用すればよいかわかりません。私を助けてください。

ありがとう。

4

2 に答える 2

7

1行だけ必要 -

$(function() {
    $('#listBtns a').click(function() {
       $(this).toggleClass('on off');        
       $("#tblResult tr").eq($(this).text()).toggle('on off');
    });
});

デモを見る

これは、テキストと行番号が一致する限り機能します。

于 2013-05-13T16:49:20.967 に答える