0

私はここで助けを求めているJqueryの初心者です。問題は非常に単純ですが、目標を達成するために参照している項目が複数あるため、詳細に説明しています

1) 私は自分のサイトで次の Jquery プラグインを使用しましたhttp://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

このプラグインはmodernizr.custom.34978.js、次の Javascript を使用してぼかしを行います

$(function() {

                var $container  = $('#ib-container'),
                    $articles   = $container.children('article'),
                    timeout;

                $articles.on( 'mouseenter', function( event ) {

                    var $article    = $(this);
                    clearTimeout( timeout );
                    timeout = setTimeout( function() {

                        if( $article.hasClass('active') ) return false;

                        $articles.not( $article.removeClass('blur').addClass('active') )
                                 .removeClass('active')
                                 .addClass('blur');

                    }, 65 );

                });

                $container.on( 'mouseleave', function( event ) {

                    clearTimeout( timeout );
                    $articles.removeClass('active blur');

                });

            });

2) 以下の html タグがこれに使用されています。

<section class="ib-container" id="ib-container">
                <article>
                    <header>
                        <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3>
                        <span>December 8, 2011 by Gisele Muller</span>
                    </header>
                    <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p>
                </article>
</section>

一歩先に進み、TSQL を使用して自動的に生成される xml ファイルを使用して、この html を更新したいと考えています。ユーザーがWebフォームを使用して詳細を送信すると、ストアドプロシージャを使用して同じものがxmlに変換され、次のjqueryを使用してhtmlに変換されます。

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "http://localhost:5732/js/ycube.xml",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml) {
    var list = $('#ib-container');

     $(xml).find("article").each(function (index, element) {

        var field = $(element)

        var link = field.find('a').text()
        var span = field.find('span').text()
         var para = field.find('p').text()

      .append('<article><header><h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">' + link + '</a></h3><span>'+span+ '</span></header><p>'+ para + '</p></article>')

    ;
    })
}

そして、これがSQLserverクエリを使用して作成された私のxmlファイルです

?xml version="1.0" encoding="utf-8" ?>
<sepx>
        <article>
                    <header>
                        <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3>
                        <span>December 8, 2011 by Gisele Muller</span>
                    </header>
                    <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p>
                </article>
</sepx>

私はこれまで成功しており、jquery が呼び出されると、html タグは期待どおりに埋められます。すべての主要なスタイルも期待どおりに適用されますが、上記の Jquery プラグインを使用する必要があるぼかし効果 (箇条書き 1 を参照)起こっていません。

HTML コードを手動で配置すると (箇条書き 2 を参照)、プルは期待どおりに機能します。

XMLから詳細を取得しているときにぼかし効果だけが機能しない理由を理解するために、誰かが私を助けてくれますか? 私はすべての主要なブラウザでこれを試しました。

繰り返しますが、私は Jquery と HTML の独学であり、上記のすべてのコード スニペットは複数の場所から取得され、必要に応じて変更されています。

4

1 に答える 1