2

我正在尝试将每个帖子列表包含在 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 回答
0

从外观上看，您的列表是浮动的。您应该使用 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-17T08:31:58.667 回答