0

次のコードで何か問題が発生しているようです：http：//jsfiddle.net/yunowork/qKj6b/1/

[次へ]をクリックすると、スパン内のテキストが上部のスパンに表示され、右側のレース（Rn）に対応する.hiddentextはずです。.showtextたとえば、R3が強調表示されている場合、その.hiddentext「Race
3Oregon14：30」のコンテンツがスパン内に表示されます。.showtext.

これは私が間違いを犯した行です：

$('.showtext').text($('.hiddentext').first('td:first').text());

私はここで何が間違っているのですか？

4

5 に答える 5

2

簡単に始めましょう：

あなたの問題：

$('.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/

于 2012-09-09T07:54:06.983 に答える
1

そのはず

$('.showtext').html($('.highlighted .hiddentext').html());

前のリンクについても同様です...

またはさらに良いことに、@ balexandreのおかげで：

$('.showtext').html($nextCol.find('.hiddentext').html());
$('.showtext').html($prevCol.find('.hiddentext').html());

フィドル

@balexandreヒントに一致するように更新：フィドル2

于 2012-09-09T07:49:24.117 に答える
1

以下をせよ：

    var $currCol = $('.highlighted'); //to get the current column
    $('.race strong').text($currCol.closest('.highlighted').first('td:first').text());
于 2012-09-09T07:49:48.177 に答える
0

これを試してください（両方とも同じ）

$('.showtext').html($currCol.find('span.hiddentext').html());

実施例。

于 2012-09-09T07:52:56.200 に答える
0

.hiddentextクラスはすべてのスパンを選択し、first()常に最初のスパンを返しますtd。.hiddentext現在強調表示されている列から選択していることを確認してください。

$('.showtext').text($('.highlighted .hiddentext').first('td:first').text());

于 2012-09-09T07:58:58.613 に答える