Question

我正在尝试修改this教程以添加社交网络链接。这是瓷砖的标记：

<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属性。我不确定为什么添加这两行会搞砸它。更具体地说，我已经跟踪了实际上使得图块与this.$facebook.html( eldata.facebook );的行为不同的行。你们可以看看我做了什么，看看我是否犯了一个明显的错误？我从来没有做过这样的事情所以我是新手。以下是您可以查看的网站：http://wwwdev.cco.purdue.edu/matt/grid/index.html

谢谢！

Answer 1

您错过了调整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添加一个元素，它应该有效。

Answer 2

var $itemEl = this.$item.children( 'a' )

返回每个anchor的所有li标记的列表。看起来它返回了多个条目

无法使用jQuery获取数据属性的值

2 个答案: