0

把事情写出来有助于我更好地理解。我试图弄清楚如何（或最好的方法）做到这一点。我需要编写一个脚本，将一个国家的语言与表格中的特定国家联系起来。

  • 用户点击国家名称 (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");
        });
});
4

2 回答 2

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/

于 2012-11-09T21:58:56.693 回答
1

只要设置了 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>

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

    } );

} );
于 2012-11-10T00:08:51.113 回答