簡単に始めましょう:
あなたの問題:
$('.showtext').text($('.hiddentext').first('td:first').text());
あなたが言っているのは、すべてをつかみ.hiddentext
、td
... 魔女はコードにあるものではなく、hiddentext を含む td を持っている... つまり、その逆です。

やりたいことは、現在の NEXT td を取得して隠しテキストを取得するだけなので、次のように変更するだけです。
$('.showtext').text($nextCol.find('.hiddentext').text());
<br/>
が正しくレンダリングされていないことがわかりますか? これは、プロパティを設定しているためであり、text
プロパティを設定する必要がありhtml
ます。

最終的なコードは次のようになります。
$('.showtext').html($nextCol.find('.hiddentext').html());
実際の例: http://jsfiddle.net/qKj6b/8/

あなたのコード:
コンテキストにデータを提供するためにプレースホルダーが必要になるたびに、そのような値を保持して非表示にするために HTML タグを使用しないでください...data-
属性を使用してください。ウィッチは HTML5 準拠であり、 IE6 のように HTML5 をサポートしていなくても、どのブラウザでも使用できます。
現在のテーブル定義 ( td
):
<td class="visible" id="r2">
<span class="hiddentext">Race 2<br />Santa Fe 12:00</span>
<strong><a href="#" title="Race number 1">R2</a></strong>
</td>
次のようにする必要があります。
<td class="visible" id="r2" data-text="Race 2<br />Santa Fe 12:00">
<a href="#" title="Race number 1">R2</a>
</td>
witch の方が読みやすく、JavaScript コードから次のように簡単に取得できます。
var hiddenText = $nextCol.data("text");
あなたのコード (パート 2):
これを知るのはとても簡単です
あなたが自分自身を繰り返すたびに、あなたはそれを間違っています
Next と Prev のメソッドはほぼ同じなので、すべてを繰り返しています。このためには、コードをリファクタリングし、単純なメソッドを 1 つだけ使用する必要があります。この方法では、将来の変更は 1 つの場所でのみ発生し、場所のみ。
$(".next").click(function(e){
e.preventDefault();
var $nextCol = $('.highlighted').next('td');
MoveCursor($nextCol, 'next');
});
$(".previous").click(function(e){
e.preventDefault();
var $prevCol = $('.highlighted').prev('td');
MoveCursor($prevCol, 'prev');
});
function MoveCursor(col, side) {
var maxCol = 8;
if((side === 'next' && col.length != 0) ||
(side == 'prev' && col.length != 0 && col.index() >= maxCol)) {
$('.highlighted').removeClass("highlighted");
col.addClass("highlighted");
// show current title
$('.showtext').html(col.data('text'));
if (col.hasClass("invisible")) {
col.removeClass("invisible");
col.addClass("visible");
var $toRem;
if(side == 'prev')
$toRem = col.next('td').next('td').next('td').next('td').next('td').next('td');
else
$toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');
$toRem.removeClass("visible");
$toRem.addClass("invisible");
}
}
}
実際の例: http://jsfiddle.net/qKj6b/22/