Question

我需要让它适用于所有元素：JSFiddle

第一个元素

  <p id="tweet1">First long text displayed fully on hover</p>

通过

工作

   var tweet = document.getElementById('tweet1');

第二和第三个元素不起作用：

  <span class="tweet1">Second long text displayed fully on hover</span>

  <span class="tweet1">Third long text displayed fully on hover</span>

JavaScript的：

var tweet = document.getElementById('tweet1');
tweet.id = 'tweet1';
tweet.className = 'hiding';

var slide_timer,
    max = tweet.scrollWidth,
    slide = function () {
        tweet.scrollLeft += 2;
        if (tweet.scrollLeft < max) {
            slide_timer = setTimeout(slide, 40);
        }
    };

tweet.onmouseover = tweet.onmouseout = function (e) {
    e = e || window.event;
    e = e.type === 'mouseover';
    clearTimeout(slide_timer);
    tweet.className = e ? '' : 'hiding';
    if (e) {
        slide();
    } else {
        tweet.scrollLeft = 0;
    }
};

CSS

#tweet1 {
    overflow:hidden;
    white-space:nowrap;
    width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

当我将HTML <p id="tweet1">更改为<p class="tweet1">时，在CSS #tweet1到.tweet1以及JS var tweet = document.getElementById('tweet1');到var tweet = document.gelElementsByClassName('tweet1'); 没有任何反应，第一个元素停止工作。

Answer 1

gelElementsByClassName 为您提供了一个列表..

您需要遍历列表并为HTML集合中的每个元素分配相同的功能。

var tweets = document.getElementsByClassName('tweet1');
for (var i = 0; i < tweets.length; i++) {
    var tweet = tweets[i];
    tweet.className = 'hiding';

    var slide_timer,
    max = tweet.scrollWidth,
        slide = function () {
            tweet.scrollLeft += 2;
            if (tweet.scrollLeft < max) {
                slide_timer = setTimeout(slide, 40);
            }
        };

    tweet.onmouseover = tweet.onmouseout = function (e) {
        e = e || window.event;
        e = e.type === 'mouseover';
        clearTimeout(slide_timer);
        tweet.className = e ? '' : 'hiding';
        if (e) {
            slide();
        } else {
            tweet.scrollLeft = 0;
        }
    }
}

最好将for循环的内容提取到一个单独的函数中。

Updated Fiddle

Answer 2

HTML 第一个长文本在悬停时完全显示

<p class="tweet1">Second long text displayed fully on hover</p>

<p class="tweet1">Third long text displayed fully on hover</p>

CSS

 .tweet1 {
   overflow:hidden;
    white-space:nowrap;
   width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

jQuery的/使用Javascript

$('.tweet1').addClass('hiding');

var slide_timer,
slide = function (element) {
    element.scrollLeft += 2;
    if (element.scrollLeft < element.scrollWidth) {
        slide_timer = setTimeout(function(){slide(element);}, 40);
    }

};


$('.tweet1').mouseover(function () {        
    clearTimeout(slide_timer);
        $(this).removeClass('hiding');
        slide(this);
    });

$('.tweet1').mouseout(function () {        
    clearTimeout(slide_timer);
        $(this).addClass('hiding');
        $(this)[0].scrollLeft = 0;
    });

要查看此操作，请查看此jsFiddle

如何使getElementsByClassName工作而不是getElementById？

2 个答案: