0

我似乎在以下代码中做错了什么：http: //jsfiddle.net/yunowork/qKj6b/1/

单击下一步时，跨度内的文本.hiddentext应显示在.showtext顶部的跨度中，并与右侧的 Race (Rn) 相对应。例如，当 R3 突出显示时，.hiddentext“Race 3
Oregon 14:30”的内容应显示在跨度内.showtext.

这是我犯错误的地方：

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

我在这里做错了什么？

4

5 回答 5

2

让我们从简单的开始：

你的问题：

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

你在说，抓住所有.hiddentext，选择第一个有一个td......女巫不是你在代码中拥有的，你有，包含隐藏文本的td......所以，反过来。

在此处输入图像描述

您要做的只是获取当前的 NEXT td 并获取 hiddentext，因此，只需更改为：

$('.showtext').text($nextCol.find('.hiddentext').text());

现在，你能看到<br/>没有正确渲染吗？那是因为你正在设置text属性，你应该设置html属性。

在此处输入图像描述

最终的代码应该是这样的：

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

现场示例：http: //jsfiddle.net/qKj6b/8/

在此处输入图像描述

你的代码：

每次你需要有占位符来为上下文提供一些数据时，请不要使用 HTML TAGS 来保存这些值并隐藏它们......利用data-属性，女巫是 HTML5 兼容，并且在任何浏览器，即使它不支持 HTML5，例如 IE6。

您的表定义 ( 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>

女巫更容易阅读，从你的javascript代码中，你可以很容易地得到这个：

var hiddenText = $nextCol.data("text");

您的代码（第 2 部分）：

这个很容易知道

每次你重复自己，你都做错了

您拥有 Next 和 Prev 的方法几乎完全相同，因此，您正在重复所有内容，为此，您应该重构代码并仅使用一种简单的方法，这样，将来的任何更改都只会发生在一个地方，并且只有地方。

$(".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 提示：Fiddle 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 回答