Question

我是jQuery的新手，所以我有2个问题。

1 - 如何突出显示此功能中单词之间的空格？

2 - 如何突出显示<abbr class="word p1">代码？

HTML代码：

<span id="4">
<abbr class="word p1" >&#xfb62;</abbr>
<abbr class="word p1" >&#xfb63;</abbr>
<abbr class="word p1" >&#xfb64;</abbr>
<abbr class="word p1" >&#xfb65;</abbr>
<abbr class="end p1" >&#xfb66;</abbr>
</span >

JavaScript代码：

$(function(){
    var time = 5;
    $("abbr", "#4").each(function(i,e) {
        $(e).delay(i*((time*1000)/$("abbr", "#4").length)).animate({'background-color': '#0f0'}, 500);
    });
});

Css代码：

span
{
    text-align:justify;
    float:right;
}

    @font-face {
        font-family: 'p1';
        src: url('http://c216429.r29.cf1.rackcdn.com/p1.eot?#iefix') format('embedded-           opentype'),
             url('http://c216429.r29.cf1.rackcdn.com/p1.woff')       format('woff'),
             url('http://c216429.r29.cf1.rackcdn.com/p1.ttf')        format('truetype'),
             url('http://c216429.r29.cf1.rackcdn.com/p1.svg#p1')    format('svg');
    }

    .p1 {
        font-family: 'p1';
    }

演示： http://jsfiddle.net/eTyaV/

Answer 1

根据我上面的评论，只需在标记中包含空格即可解决空间突出显示问题。

<span id="4">
    <abbr class="word p1" >&#xfb62; </abbr>
    <abbr class="word p1" >&#xfb63; </abbr>
    <abbr class="word p1" >&#xfb64; </abbr>
    <abbr class="word p1" >&#xfb65; </abbr>
    <abbr class="end p1" >&#xfb66;</abbr>
</span >

对于第2点，您可以使用类似if($(e).hasClass('word')) {}的条件检查每个循环中元素是否具有“word p1”类。

$(function(){
    var time = 5;

    $("abbr").each(function(i,e) {

        if($(e).hasClass('word')) {  
            $(e).delay(i*((time*1000)/$("abbr").length)).animate({'background-color': '#0f0'}, 500);
        }
    });
});

http://jsfiddle.net/eTyaV/7/

Answer 2

将空格放在<abbr>

中

。这将解决空白空间

<span id="4">
    <abbr class="word p1" >&#xfb62; </abbr>
    <abbr class="word p1" >&#xfb63; </abbr>
    <abbr class="word p1" >&#xfb64; </abbr>
    <abbr class="word p1" >&#xfb65; </abbr>
    <abbr class="end p1" >&#xfb66;</abbr>
</span >

Answer 3

要仅使用类<abbr>突出显示word p1元素，只需编写

即可

$('abbr.word.p1').css({background:'0f0'});

在jQuery中突出显示单词之间的空白空间

3 个答案: