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”>Espana</td></tr>
<tr><td class=”france”>France</td>  </tr>
<tr><td class=”italia”>Italy</td></tr>
</table>
<table id=tbl-language>
                     <tr>< td class=”espanol">Espanol</td></tr>
     <tr> <td class=”francais”>Francais</td> </tr>
     <tr> <td class=”italiano”>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

我会使用灵活的jQuery脚本来使用任何标记，只要设置了data- *属性：

<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>

使用jQuery链接两个HTML表或列表，并在鼠标事件上突出显示两个表中的相关行：

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' );
                    }
                } );
            } );
        }

    } );

} );

选择，改变多个表格单元格的CSS

2 个答案:

选择，改​​变多个表格单元格的CSS

2 个答案:

选择，改变多个表格单元格的CSS