過去数時間、何かに取り組んできましたが、適切に機能していないようです。ユーザーがテーブルの列 (Rn) をクリックすると、それが強調表示され、他の TD 要素のテキスト (プレイヤー名とレース情報) が変更されます。これは、前のボタンと次のボタンの場合と同じ原則で、すべて正常に機能します。
ここで私が間違っていることを知っている人はいますか？
質問する
143 次
5 に答える
1
一見すると、「$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());
大丈夫なはずです。ただし、前、次、クリックのすべてに依存する単一の「select_colum」関数を作成することを検討すると、コードがよりコンパクトになり、重複するコードが減り、デバッグとトラブルシューティングが容易になります。
これについて少し詳しく説明すると、テーブルに名前を追加したいとしましょう。それらすべてを適切に更新するには、次の行を追加する必要があります
$('.showplayerfour').html($thisCol.find('.hiddenplayerfour').html());
3 つの異なる場所で。代わりにできることは、次のような関数を作成することです。
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 をこの関数だけに追加すると、各表示オプションが機能します。この手法でできることは他にもたくさんあります (やる気があれば、個々のプレーヤーを特定する必要さえないところまで到達できるでしょう)。
于 2012-09-18T19:21:14.617 に答える
1
".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());
ここで修正してコードをフォークしました：
于 2012-09-18T19:21:47.610 に答える
1
コード
$('.showplayerone').html($('.hiddenplayerone').html());
$('.showplayertwo').html($('.hiddenplayertwo').html());
$('.showplayerthree').html($('.hiddenplayerthree').html());
hiddenplayerone two などのクラスを持つ最初の要素の値を、表示されているデータに入れています。これは常に 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/
いくつかの場所 (R1、R2 など) で同じ ID を使用しているように見えますが、これは悪い習慣です。これを変更することを検討してください。
于 2012-09-18T19:31:12.180 に答える
1
これが私の完全な実用的なソリューションです
「楽しんで」と言いたい… 注意：DOM（テーブル要素）に1つのハンドラーのみが添付されています
$(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;
}
});
});
于 2012-09-18T23:47:10.697 に答える
1
テキストを置き換える 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');
});
于 2012-09-18T19:40:42.090 に答える