Question

我在过去几个小时里一直在努力，但似乎无法让它正常工作。当用户点击表格列（Rn）时，它应该突出显示，并且文本应该在其他一些TD元素中更改（播放器名称和竞赛信息），原理与前一个和下一个按钮相同，其中一切正常。< / p>

任何人都知道我在这里做错了什么？

代码：http://jsfiddle.net/yunowork/4UGre/8/

Answer 1

乍一看，您的问题似乎是您使用“$ prevCall”和“$ nextCall”来确定点击上一个或下一个时要显示的玩家。单击列时不会执行此类操作 - 如果您执行this：

之类的操作

var $thisCol = $(this);
rows.children().removeClass('highlighted');
$('.showtext').html($thisCol.find('.hiddentext').html());
$('.showplayerone').html($thisCol.find('.hiddenplayerone').html());
$('.showplayertwo').html($thisCol.find('.hiddenplayertwo').html());
$('.showplayerthree').html($thisCol.find('.hiddenplayerthree').html());

应该没问题。但是，您可能会考虑创建一个单独的“select_colum”函数，前一个，下一个并单击全部依赖，它将使代码更紧凑并减少重复代码，这使得调试和故障排除更容易。

详细说明一下：假设你想在表格中添加一个名字。为了正确更新它们，您需要添加行

$('.showplayerfour').html($thisCol.find('.hiddenplayerfour').html());

在三个不同的地方。你可以做的是创建一个这样的函数：

function update_names($col) {
    $('.showtext').html($col.find('.hiddentext').html());
    $('.showplayerone').html($col.find('.hiddenplayerone').html());
    $('.showplayertwo').html($col.find('.hiddenplayertwo').html());
    $('.showplayerthree').html($col.find('.hiddenplayerthree').html());
}

然后，您可以将播放器4添加到此功能，每个显示选项都可以使用它。你可以用这种技术做更多的事情（如果你有动力，你可能会达到甚至不需要指定每个玩家的程度）。

Answer 2

您在搜索".hidden_____"信息方面不够具体。所以它只是选择它找到的第一个。我通过将搜索范围缩小到仅点击元素的祖先<td>的死者来更正了问题：

$('.showtext').html($(this).closest("td").find('.hiddentext').html());
$('.showplayerone').html($(this).closest("td").find('.hiddenplayerone').html());
$('.showplayertwo').html($(this).closest("td").find('.hiddenplayertwo').html());
$('.showplayerthree').html($(this).closest("td").find('.hiddenplayerthree').html());

我在这里使用修复程序分叉你的代码：

http://jsfiddle.net/4pu9Q/

Answer 3

代码

$('.showplayerone').html($('.hiddenplayerone').html());
$('.showplayertwo').html($('.hiddenplayertwo').html());
$('.showplayerthree').html($('.hiddenplayerthree').html());

将第一个元素的值与hiddenplayerone两个等等的值放入显示的数据中，这将始终是John，Fred和Jason。您需要通过向选择器提供正确数据的ID来选择正确的元素，如下所示：

thisRow = $(this).prop('id');
rows.children().removeClass('highlighted');
$('.showtext').html($('.hiddentext').html());
$('.showplayerone').html($('#'+thisRow+' .hiddenplayerone').html());
$('.showplayertwo').html($('#'+thisRow+' .hiddenplayertwo').html());
$('.showplayerthree').html($('#'+thisRow+' .hiddenplayerthree').html());

如果您单击比赛列中的任何行，而不仅仅是标题行，则此方法有效。

工作示例：http://jsfiddle.net/4UGre/13/

你似乎在几个地方使用相同的ID（R1，R2等），这是不好的做法，考虑改变它。

Answer 4

您需要选择要替换文本的td ..如果找到了，那么该函数似乎工作正常..

rows.children().not('.emptyrace, .race, .not').on('click', function(e) {
    rows.children().removeClass('highlighted');
    var id=e.target.id ;
    $('.showtext').html($('#'+id).find('.hiddentext').html());
    $('.showplayerone').html($('#'+id).find('.hiddenplayerone').html());
    $('.showplayertwo').html($('#'+id).find('.hiddenplayertwo').html());
    $('.showplayerthree').html($('#'+id).find('.hiddenplayerthree').html());
    var index = $(this).prevAll().length;  
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlighted');
  });

FIDDLE

UPDATED FIDDLE

Answer 5

这是我的全面解决方案

jsFiddle Here

我想说'享受'...... 注意：只有一个处理程序附加到DOM（表元素）

$(function(){
  var $t = $('table');
  $t.on('click', function(e){
    var $table = $(this),
        $target = $(e.target),
        $tdParent = $target.closest('td'),
        $alltr = $table.find('> tr, > tbody > tr');
    // Prev, next and td actions
    if( $target.is('.race > a') || ! $tdParent.is('.highlighted, .emptyrace, .race, .not')  ){
        // if a 'prev' or 'next' has been clicked
        if( $target.is('a') ){
            $tdParent = $('.highlighted', $alltr.filter(':gt(0)'))[($target.hasClass('next')? 'next':'prev')]('td:not(.not)');
            if( ! $tdParent.length){
                return false;
            } else if ($tdParent.hasClass('invisible')) {
                var $one = $tdParent.eq(0), $other = $one.parent().children(':not(.not)'), index = $other.index($one);
                $tdParent.parent().each( function(i,el){
                    $(this)
                        .children(':not(.not)')
                        .filter(':eq('+(index + (6*($target.hasClass('next')? -1:1)))+')')
                            .removeClass('visible').addClass('invisible')
                });
                $tdParent.removeClass('invisible').addClass('visible');

            }
        }
        // Common actions ...
        var tdIndex = ':nth-child(' + ($tdParent.eq(0).parent().children().index($tdParent.eq(0)) + 1) + ')';
        $alltr.eq(0).find('.showtext').html($alltr.eq(1).find(tdIndex + ' > .hiddentext').html());
        $alltr.filter(':gt(0)')
                .find(' > td.highlighted').removeClass('highlighted').end()
                .find(tdIndex).addClass('highlighted').end()
                .not(':eq(0)').each(function(){
                    var $this = $(this),
                        css = $this.find('> td.not > span').attr('class').replace(/^.*(player[^ ]+).*$/, '$1');
                    $this.find('.show'+css).html($alltr.eq(1).find(tdIndex + ' .hidden'+css).html());
                });
        return false;
    }
  });
});

使用Javascript更改表中的文本

5 个答案: