2

各 Post リストを href でラップしてクリックできるようにしようとしています。基本的に、各投稿をクリックしようとすると、各投稿の上部にマウスを近づけるまで機能しません。

以下は私のコードであり、私が意味することのイメージでもあります:

JS:

function getPosts(data) {
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
    $.each(data.posts,function(i, val) {   
        $('<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"</a>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).appendTo($output);
        if ( i == 3 ) return false;
       // return (postlimit-- > 1);
    });
    $('#postlist').empty().append($output);
}

function showPost(id) {
    $('#mypost').html('<span class="img_spin">Loading post...</span>');
    $.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
        var posts='';
        posts += '<h3>' + data.post.title + '</h3>';
        posts += data.post.content;
        $('#mypost').html(posts);
    });
}

画像： ここに画像の説明を入力

画像を見ると、マウスを投稿の上端に近づけると、下部の URL が表示され、それは機能しますが、他の場所は機能しません。

4

2 に答える 2

1

このデモの [ Chrome要素] タブを見ると、終了要素が一致していないため、JavaScript が無効な HTML を生成しています。

の投稿例を使用するvar posts = { "posts" : [ {"id":"1", "title":"lorem", "excerpt":"foo"}, {"id":"2", "title":"ipsum", "excerpt":"bar"} ] }

これ'<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"</a>'により、次の最初の子が破損します<li>。

<li>
    <a href="#devotionpost" onclick="showPost(1)" < a></a>
    <h3>lorem</h3>
    <p>foo</p>
</li>

アンカー要素で何をラップしたいかによって、この更新されたデモ<li>のように投稿を作成するか、以下のコードを参照してください。

$.each(data.posts,function(i, val) {
    $output.append('<li><a href="#devotionpost" onclick="showPost(' + val.id + ')"><h3>' + val.title + '</h3><p>' + val.excerpt + '</p></a></li>');
});

または、文字列の連結を少し減らしたい場合は、次を使用できます.wrapInner()

$.each(data.posts,function(i, val) {
    var $post = $('<li><h3>' + val.title + '</h3><p>' + val.excerpt + '</p></li>');
    $post.wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post);
});

.append()またはあなたのアプローチを維持します：

$.each(data.posts,function(i, val) {
    var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post);
});

注:文字列連結アプローチを単一 .append()と組み合わせると、最もパフォーマンスの高いコードになります。

于 2013-10-17T09:47:01.770 に答える