0

私は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/

4

3 に答える 3

1

中にスペースを入れて<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 >
于 2012-08-26T09:43:00.137 に答える
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 については、次のような条件を使用して、各ループで要素に「単語 p1」のクラスがあるかどうかを確認できますif($(e).hasClass('word')) {}。

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

于 2012-08-26T04:48:31.487 に答える
0

<abbr>クラスを持つ要素のみを強調表示するには、次のword p1ように記述します

$('abbr.word.p1').css({background:'0f0'});
于 2012-08-26T20:25:46.787 に答える