Question

我有4篇文章的列表（带有小照片）和1张带有更大照片的文章。当我点击一篇文章时，我将使用javascript在大的地方展示那篇小文章。

要显示带有更大照片的文章，我需要了解文章的3件事：title，detailUrl和photoUrl（更大的照片），我想用javascript来抓住这个。

Methode 1：使用jQuery .find（）搜索DOM

$("#small").find('img').attr('src');

Methode 2：将所有内容存储在单独的数据属性中：

data-title="titel1" data-detailurl="article1.html"

Methode 3：存储JSON字符串

data-json="{ "title": "titel1", "detailurl": "article1.html" }"

我认为第3种方法是最好的（最快？）。是吗？

这里是html：http://jsfiddle.net/kHbZU/

Answer 1

方法三最容易使用您列出的方法。不要担心字符串转换的效率。你必须拥有数以百万计的文章才能真正发挥作用。请记住，如果要在服务器上构建此HTML，则必须对JSON进行编码以使HTML有效。您可以使用.btoa()/.atob()进行base-64编码，以便轻松完成此操作。如果使用.dataset属性来设置DOM上的数据，则DOM会将其妥善存储为对象。

第四个选项是使用<pre>块display: none;。如果您在服务器上构建列表，这很有效。我在我写的tumblr主题http://stiff-theme.tumblr.com/上使用此方法，因为我对服务器输出几乎没有控制权。您可以将JSON取消编码，并使用$.parseJSON()轻松将其转换为对象。

HTML：

<pre>
    { "title": "titel1", "detailurl": "article1.html" } 
</pre>

脚本：

var articles = $.parseJSON( $( 'pre' ).text() );

第五种方法是使用HTML标记和CSS来设置样式。创建包含所有内容的文章大版本的标记。然后使用类隐藏，调整大小和位置以显示较小的列表。我最喜欢这种方法来解决你想要解决的问题。

演示：http://jsfiddle.net/ThinkingStiff/ngE8s/

HTML：

<ul id="articles">
    <li>
        <article>
            <img src="large-image-url.png">
            <h1>Title</h1>
            <section>
                <p>article body</p>
                ...

            </section>
        </article>
    </li>
    ...

</ul>

<div id="display"><div>

CSS：

#articles {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 200px; 
}

#articles li {
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    display: block;  
    height: 32px;
    overflow-y: hidden;
}

#articles img {
    float: left;
    height: 30px;
    margin-right: 4px;
    width: 30px;    
}

#articles h1 {
    font-size: 13px;
    margin: 0;
}

#display {
    display: inline-block;
    vertical-align: top;
    width: 400px;
}

#display img {
    float: left;
    height: 150px;
    margin-right: 8px;
    width: 150px;    
}

#display h1 {
    margin: 0;    
}

p {
    font-size: 18px;
}

脚本：

document.getElementById( 'articles' ).addEventListener( 'click', function( event ) {
    var article = event.target.closestByTagName( 'article' );

    if( article ) {
        var display = document.getElementById( 'display' ),
            large = article.cloneNode( true );
        display.removeChild( display.firstChild );
        display.appendChild( large );
    };
}, false );

Element.prototype.closestByTagName = function ( tagName ) {
    return this.tagName && this.tagName.toUpperCase() == tagName.toUpperCase()
        ? this
        : this.parentNode.closestByTagName && this.parentNode.closestByTagName( tagName );
};

输出：

enter image description here

Answer 2

jQuery.data怎么样？

我认为它比所有选项更好。

    $.data(document.body, "sortElement", "0"); //set value
    $.data(document.body, "sortElement");        //read value

Answer 3

最好的方法是使用data-xxx属性。这就是它的意思。

请记住，您不能在data-xxx属性中使用非utf8字符。如果它是太多的数据或内容数据，我建议存储像

这样的idreference

<img data-content="#description"/>

并有一个

<p id="#description">some more content with &aacute;ccents</p>

希望它增加了这个问题。

问候，巴特。

在dom元素中存储数据的最佳实践（1 json或多个数据属性）

3 个答案: