JSFiddle - React, Tailwind, and code Playground
by nicomiceli
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
var socialNet;
var postTitle;
$(".span12 img").click(function () {
if ($(this).attr("src") === "/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg") {
socialNet = "twitter";
}
else {
socialNet = "facebook";
}
//socialNet = $(this).data("social ");
postTitle = $(this).parents('.span10').find('.post-title h2 a').text();
//alert(socialNet + " | " + postTitle);
_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);
});