將每個列表數組換成標籤

我試圖讓每個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); 
    }); 
}

圖片： enter image description here

如果你看一下圖片，當我將鼠標懸停我的鼠標靠近郵政的頂部邊緣，那麼底部的網址顯示並且可以工作，但任何地方都不起作用。

來源

2013-10-17 Chelseawillrecover

將你的'onclick'添加到包含元素的''li'或'div'。不需要使用'a'標籤來執行點擊處理。 –

從在this demo看鉻元素標籤中的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>之類的文章，如this updated demo或查看以下代碼：

$.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()是best performing code。

來源

2013-10-17 09:47:01 andyb

謝謝Andyb的解釋。你剛剛添加了一個我之前嘗試過的例子，並且看到了我出錯的地方。我會在更正錯誤後立即更新此代碼。 – Chelseawillrecover

根據您的建議做了一些測試，並且看起來都很好。謝謝。我會提出另一個關於使用count或if語句的問題，所以它會顯示前6個帖子和點擊函數，它會追加下6個帖子 – Chelseawillrecover

高興地看到，你得到它的工作 – andyb

從外觀上看，您的清單是浮動的。您應該使用clearfix技術使「A」元素框包含列表。你也應該知道，通過標準的「A」元素不允許包含塊元素，並且只要Internet Explorer 9（未在10或11中檢查）「A」不會按照你的意圖工作。

可能的解決方法：
<div style="position:relative"> <ul> <li></li> <ul> <a style="position:absolute;display:block;top:0;bottom:0;left:0:right:0;" href="#"></a> <div>

來源

2013-10-17 08:31:58

將每個列表數組換成標籤

回答

相關問題