сделать предварительный просмотр всего сообщения блоггера кликабельным

на моем веб-сайте 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
person cohen    schedule 28.05.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Предполагая, что каждый элемент date-outer содержит один заголовок уровня 2, содержащий один якорь:

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

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

person Jon Cram    schedule 28.05.2012
comment
Эй, я вставил это в свой код, но это не сработало: <script type='text/javascript'> $(&#39;.date-outer&#39;).each(function () { $(this).click(function () { window.location = $(&#39;h2 a&#39;, this).attr(&#39;href&#39;); }); }); </script> - person cohen; 29.05.2012
comment
Что касается @cohen, приведенный выше код работает, и связанный jsfiddle демонстрирует это. Вам придется заняться интеграцией с вашим сайтом. Если вы не можете, задайте другой вопрос по конкретному вопросу, и я уверен, что другие помогут. - person Jon Cram; 13.07.2012
comment
Ага, спасибо за код. Это работает, я имел в виду, что на моем сайте это не сработало. Это фактически сделало все внешние даты ссылкой на первый пост в блоге на странице. - person cohen; 14.07.2012

arrow_upward
0
arrow_downward

Если вы хотите иметь возможность щелкнуть что-либо в сообщении и заставить его делать то, что вы хотите, рассмотрите возможность использования селектора *.

$('previewpost *').click(function() {
       doWhatever(); 
});
person dockeryZ    schedule 28.05.2012