0

このチュートリアルを変更して、ソーシャル ネットワーク リンクを追加しようとしています。タイルのマークアップは次のとおりです。

<li>
                    <a href="http://cargocollective.com/jaimemartinez/" 
data-largesrc="http://wwwdev.cco.purdue.edu/ImageSlider/21centuryimages/logos/ALDI.png" data-title="ALDI" 
data-facebook="http://www.facebook.com" 
data-description="" >
                        <img src="images/aldi.png" alt="img01"/>
                    </a>
                </li>

ご覧のとおり、 のデータ属性を含めましたdata-facebook。私はJSファイルに入り、Facebookの行を次のように追加しました：

var $itemEl = this.$item.children( 'a' ),
            eldata = {
                href : $itemEl.attr( 'href' ),
                largesrc : $itemEl.data( 'largesrc' ),
                title : $itemEl.data( 'title' ),
                description : $itemEl.data( 'description' ),
                facebook : $itemEl.data( 'facebook' )
            };

        this.$title.html( eldata.title );
        this.$description.html( eldata.description );
        this.$facebook.html( eldata.facebook );
        this.$href.attr( 'href', eldata.href );

保存して Chrome で試してみると、展開された情報コンテナーを表示するタイルをクリックすると、href代わりに属性に移動します。なぜこれらの2行を追加すると台無しになるのかわかりません。より具体的には、実際にタイルの動作が とは異なる行をたどりましたthis.$facebook.html( eldata.facebook );。私が行ったことを見て、明らかな間違いを犯したかどうかを確認していただけますか? 私はこのようなことをしたことがないので、初めてです。チェックアウトできるサイトは次のとおりです。 http://wwwdev.cco.purdue.edu/matt/grid/index.html

ありがとう！

4

2 に答える 2

2

create()メソッドの調整を怠った

create : function() {
    // create Preview structure:
    this.$title = $( '<h3></h3>' );
    this.$description = $( '<p></p>' );
    this.$href = $( '<a href="#">Visit website</a>' );
    this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
    this.$loading = $( '<div class="og-loading"></div>' );
    this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
    this.$closePreview = $( '<span class="og-close"></span>' );
    this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
    this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
    // append preview element to the item
    this.$item.append( this.getEl() );
    // set the transitions for the preview and the item
    if( support ) {
        this.setTransition();
    }
}

の要素を追加する$facebookと、機能するはずです。

于 2013-05-22T18:11:44.373 に答える
0 
var $itemEl = this.$item.children( 'a' )

anchor各 のすべてのタグのリストを返しますli。複数のエントリを返しているようです

于 2013-05-22T18:04:51.700 に答える