Question

目前，只有h1被链接到帖子。我希望整个div post-info可以点击。

我一直在使用这个，但由于某种原因没有任何变化。整个div仍然无法点击;只有h1。

JS

$("article.has-post-thumbnail .post-info").click(function() {
    window.location = $(this).find("a").attr("href");
    return false;
});

HTML

<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
    <div class="post-info" style="display: none; opacity: 1;">
        <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
        <span class="posted-on">
            <a href="/" rel="bookmark">
                <time class="entry-date published" datetime="2014-08-14T13:02:27+00:00">August 14, 2014</time>
                <time class="updated" datetime="2014-09-24T09:49:19+00:00">September 24, 2014</time>
            </a>
        </span>
    </div>
    <img width="312" height="200" src="http://i.imgur.com/9spxUQe.jpg" class="attachment-post-thumbnail wp-post-image" style="opacity: 1;"> 
</article>

CSS

article {
background: #EE7A1D;
float: left;
height: 200px;
margin: 0 2px 2px 0;
overflow: hidden;
position: relative;
width: 312px;
}

article .post-info {
display: none;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}

article .post-info h1 {
line-height: 1.4;
font-size: 20px;
font-size: 2rem;
}

article .post-info a {
color: #FFF;
}

article .post-info span {
font-style: italic;
}

article .post-info a {
color: #FFF;
}

article > img {
width: 100%;
}

.updated:not(.published) {
display: none;
}

编辑：这是我创建的小提琴：http://jsfiddle.net/jaL5bd3z/1/

Answer 1

问题是您将点击操作应用于仅包含div的{{1}}。您有两种方法可以解决它：

包裹h1中的所有文章;或
将点击操作应用于div，而不是article。

这样的事情：

div

Answer 2

将代码更改为此值，以便整个div可以点击

<a href="post-link" rel="bookmark">
    <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
    <div class="post-info">
    <h1 class="entry-title">[POST TITLE]</h1>
</div>
    <img width="624" height="400" src="[POST THUMBNAIL]" class="attachment-post-thumbnail wp-post-image">   
    </article>
</a>

因为以前只有标题链接所以我现在改为完整的文章

使整个div可以点击WordPress的帖子，而不仅仅是标题？

2 个答案: