jquery - 複数の表セルの css の選択、変更

Question

物事を書き出すことは、私がよりよく理解するのに役立ちます。これを行う方法（または最良の方法）を見つけようとしています。国の言語をテーブル内の特定の国に関連付けるスクリプトを作成する必要があります。

• ユーザーが国名をクリックする (td)
• 言語リストが表示されます (別の表の td にあります)
• その特定の国の言語と国名は、両方の表で青色の太字 (アクティブな状態) です。
• ユーザーが国のテーブルで別の TD をクリックすると、現在の TD の「アクティブ」状態が通常に戻ります。

HTML でテーブルを手動で作成し、各 TD ペアの個々のクラスを使用して国を言語に関連付けます。つまり、クラスのために TD ごとにコードを書かなければなりません。これは機能しますが、選択した TD のみを「アクティブ」にして、他の TD を通常に戻す必要があります。

CSS

td {cursor:pointer;}
td.active {color:blue;font-weight:bold;}

HTML

<table id=tbl-country>
<tr><td class=”esp”&gt;Espana</td></tr>
<tr><td class=”france”&gt;France</td>  </tr>
<tr><td class=”italia”&gt;Italy</td></tr>
</table>
<table id=tbl-language>
                     <tr>< td class=”espanol">Espanol</td></tr>
     <tr> <td class=”francais”&gt;Francais</td> </tr>
     <tr> <td class=”italiano”&gt;Italiano</td></tr>
</table>

JS

$(document).ready(function(){
    $(".tbl-language").hide();      
    $("#tbl-country td").click(function(){
        $(".tbl-language").show();
        });
    $("td.espana").click(function(){
        $(this).toggleClass("active");
        $("td.espanol").toggleClass("active");

    $("td.france").click(function(){
        $(this).toggleClass("active");
        $("td.francais").toggleClass("active");
        });

    $("td.italia").click(function(){
        $(this).toggleClass("active");
        $("td.italiano").toggleClass("active");
        });
});

Answer 1

私があなたの要件を正しく理解していると仮定すると、これが私がすることです:

• データが外部ファイル (json/js 配列) のタプル リストとして提供されている場合、データをループして HTML にレンダリングします。
• データを HTML でハードコーディングする場合は、あなたが行った方法に従います :)

ただし、私の HTML は次のようになります。

<table id="tbl-country">
<tr><td class="country" id="country-1" data-id="1">Espana</td></tr>
<tr><td class="country" id="country-2" data-id="2">France</td>  </tr>
<tr><td class="country" id="country-3" data-id="3">Italy</td></tr>
</table>
<table id="tbl-language">
     <tr><td class="lang" id="lang-1" data-id="1">Espanol</td></tr>
     <tr><td class="lang" id="lang-2" data-id="2">Francais</td></tr>
     <tr><td class="lang" id="lang-3" data-id="3">Italiano</td></tr>
</table>

そして私のJSは次のようになります：

$(document).ready(function(){
    $("#tbl-language").hide();
    $("#tbl-country .country").click(function(){
        $("#tbl-language").show();
        var cId = $(this).data("id"); //jQuery >= 1.4.3 otherwise $(this).attr("data-id");
        //Remove active state from all
        $('#tbl-country .country').removeClass('active');
        $('#tbl-language .lang').removeClass('active');
        //Add active state only to the matching Country and Language
        $('#country-' + cId).addClass('active');
        $('#lang-' + cId).addClass('active');
    });
});

サンプル フィドル: http://jsfiddle.net/2xDyS/

Answer 2

data-* 属性が設定されている限り、任意のマークアップを使用するために柔軟な jQuery スクリプトを使用します。

<ul id="list1" class="linked-list" data-related-to="#list2">
    <li data-key="en">sdfhgfghgh</li>
    <li data-key="ru">e5ge45</li>
    <li data-key="de">rtzhezhu</li>
    <li data-key="fr">rtgz4t6</li>
</ul>

<table id="list2" class="linked-list" data-related-to="#list1">
    <tr data-key="en"><td>sdfgdfghgfhj</td><td>3456345635</td></tr>
    <tr data-key="ru"><td>qwesqwes</td><td>567867897890</td></tr>
    <tr data-key="fr"><td>ijkzuikujui</td><td>123123123</td></tr>
</table>

2 つの HTML テーブルまたはリストを相互にリンクし、jQuery を使用してマウス イベントで両方のテーブルの関連する行を強調表示します。

jQuery( document ).ready( function( $ ) {

    /* select cross-linked lists/tables via some class or a comma-separated list of id's */
    $( '.linked-list' ).each( function() {

        var $this = $( this );

        if( $this.attr( 'data-related-to' ) ) {

            var rows = $this.find( '[data-key]' );

            var relatedTo = $( $this.attr( 'data-related-to' ) );
            var foreignRows = relatedTo.find( '[data-key]' );

            rows.each( function() {

                var currentRow = $( this );

                currentRow.on( 'click', function() {

                    rows.removeClass( 'active' );
                    currentRow.addClass( 'active' );

                    foreignRows.removeClass( 'active' );
                    if( currentRow.attr( 'data-key' ) ) {
                        var foreignRow = foreignRows.filter( '[data-key="' + currentRow.attr( 'data-key' ) + '"]' );
                        foreignRow.addClass( 'active' );
                    }
                } );
            } );
        }

    } );

} );