更改文本不起作用

Question

我一直在爲最後幾小時工作，但似乎無法讓它正常工作。 當用戶點擊一個表格欄（Rn）時，它應該變爲高亮顯示，其他一些TD元素中的文本應該改變（玩家名稱和競賽信息），與前一個和下一個按鈕的原理相同，其中一切正常。

任何人都知道我在做什麼錯在這裏？

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

謝謝！

Answer 1

代碼

我通過縮小搜索到的祖先點擊的元素的 <td>只有死者修正了該問題

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

將隱藏的playerone等的類的第一個元素的值放入顯示的數據中，這將永遠是約翰，弗雷德和傑森。你需要用正確的數據的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 2

一眼就可以看出您的問題是您使用「$ prevCall」和「$ nextCall」來確定單擊上一個或下一個時要顯示的播放器。

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()); 

它應該是罰款：如果你這樣做this - 當單擊列時沒有這樣做。但是，您可能會考慮創建一個單獨的「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 3

您在搜索".hidden_____"信息時沒有足夠詳細。所以它只是選擇它找到的第一個。

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