【问题标题】:make whole blogger post preview clickable使整个博客帖子预览可点击
【发布时间】:2013-12-02 09:59:04
【问题描述】:

在我的网站 www.beatmushroom.com 上运行在博客平台上,我在主页上有我的帖子的小预览。要获得完整的帖子,您必须单击标题。我希望能够单击帖子预览(缩略图和文本)上的任意位置,然后将我带到帖子。我在想可能有一些方法可以用javascript做到这一点。

在主页上的源代码中,帖子包含以下内容:

    <div class="date-outer">


    <div class="date-posts">

    <div class='post-outer'>
    <div class='post hentry'>
    <a name='366770510419642006'></a>
    <h2>
    <a href='http://www.beatmushroom.com/2012/05/logic-we-get-high.html'>Logic - We Get High</a>
    </h2>
    <div class='post-header'>
    <div class='post-header-line-1'></div>
    </div>
    <div class='post-body entry-content' id='post-body-366770510419642006'>
    <span class="tags">Rap</span><br>
    <img border="0" src="http://3.bp.blogspot.com/-qkVnjpTBMjY/T78PmQDUAvI/AAAAAAAAAKA/cUEMjJQ3w5s/s1600/logic.jpg">Here is a new one check it out logic has some good chilled tracks this has got a pretty old school feel to it. I am adding the blog to technorati. Technorati code: 886BP6K6GWA7<br>
    <div style='clear: both;'></div>
    </div>
    <div class='jump-link'>
    <a href='http://www.beatmushroom.com/2012/05/logic-we-get-high.html#more' title='Logic - We Get High'>&#9834; Listen Here &#187;</a>
    </div>
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
    </span>
    <span class='post-timestamp'>
    </span>
    <span class='post-comment-link'>
    </span>
    <span class='post-icons'>
    <span class='item-control blog-admin pid-1598740620'>
    <a href='http://www.blogger.com/post-edit.g?blogID=4929692547831239344&postID=366770510419642006&from=pencil' title='Edit Post'>
    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
    </a>
    </span>
    </span>
    <div class='post-share-buttons goog-inline-block'>
    </div>
    </div>
    <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
    </span>
    </div>
    <div class='post-footer-line post-footer-line-3'>
    <span class='post-location'>
    </span>
    </div>
    </div>
    </div>
    </div>

有没有办法从这里获取链接:

<h2>
<a href='http://www.beatmushroom.com/2012/05/logic-we-get-high.html'>Logic - We Get High</a>
</h2>

然后制作元素:

    <div class="date-outer">   

链接到那个?

因为帖子的其余部分都在该元素内,所以它会使帖子预览成为一个链接。然后他们必须点击背景,但我可能可以使用 z-index 来实现它?

【问题讨论】:

    标签: javascript blogger


    【解决方案1】:

    假设每个 date-outer 元素包含一个单独的 2 级标题,它本身包含一个锚点:

    $('.date-outer').each(function () {   
        $(this).click(function () {
            window.location = $('h2 a', this).attr('href');        
        });
    });​
    

    http://jsfiddle.net/WHd5d/1/

    【讨论】:

    • 嘿,我将它这样放入我的代码中,但它不起作用:&lt;script type='text/javascript'&gt; $(&amp;#39;.date-outer&amp;#39;).each(function () { $(this).click(function () { window.location = $(&amp;#39;h2 a&amp;#39;, this).attr(&amp;#39;href&amp;#39;); }); }); &lt;/script&gt;
    • 尊重@cohen,上面的代码有效,链接的jsfiddle演示了这一点。与您的网站集成是您必须解决的问题。如果你不能,就具体问题再问一个问题,我相信其他人会提供帮助。
    • 是的,谢谢你的代码。它确实有效,我的意思是在我的网站上它不起作用。它实际上使所有约会对象都成为页面上第一篇博客文章的链接。
    【解决方案2】:

    如果您希望能够点击帖子中的任何内容并让它做您想做的事情,那么请考虑使用* 选择器

    $('previewpost *').click(function() {
           doWhatever(); 
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-07-23
      • 2021-07-22
      • 2017-07-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-29
      • 2014-04-06
      相关资源
      最近更新 更多