JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="span10">
    <div class="post-date">August 30, 2013</div>
    <div class="post-title">
         <h2><a href="http://www.domain.com/news/test">TEST post 1</a></h2>
    </div>

    <div class="post-content excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
    <div class="social">
        <p class="learn-more"><a href="http://www.domain.com/news/test">Learn More</a></p>
        <p>Share:</p>
        <img data-social="twitter" src="/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg"/>
        <img data-social="facebook"  src="/wp-content/themes/bootstrap/assets/img/facebook-hover.jpg"/>
    </div>
</div>

<hr/>

<div class="span10">
    <div class="post-date">August 30, 2013</div>
    <div class="post-title">
         <h2><a href="http://www.domain.com/news/test">TEST post 2</a></h2>
    </div>

    <div class="post-content excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
    <div class="social">
        <p class="learn-more"><a href="http://www.domain.com/news/test">Learn More</a></p>
        <p>Share:</p>
        <img data-social="twitter" src="/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg"/>
        <img data-social="facebook"  src="/wp-content/themes/bootstrap/assets/img/facebook-hover.jpg"/>
    </div>
</div>

CSS

.social img { border: 1px solid green; width: 32px; height: 32px; display:inline-block; }

JavaScript

$(".span10 img").click(function() {
    var socialNet = $(this).data("social");
    var postTitle = $(this).parents('.span10').find('.post-title h2 a').text();

    alert(socialNet + " | " + postTitle);
});