Question

 <div class="share-tooltip-wrapper" data-id="<?php echo $post_ID; ?>">
    <div class="share-tooltip">
        <div class="arrow"></div>
        <ul class="share-list">
            <li>
                <a href="http://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(CURRENT_URL); ?>" target="_blank" class="share-facebook">
                    <span class="icon">Facebook</span>
                </a>
            </li>

Hello – I’m making a wordpress site and a section of that site has “share button”(s) all with unique ids, that correspond to the shareable post. The problem is below with my jquery code, I’m trying to write code that will essentially say when you’ve clicked my share button with a data-id, then change the html of a node with that same data-id. so i can go from a share to shared state on the button. If I don’t have some unique id, then all the elements on the page are changed.

var current = jQuery(this).filter("id");
 jQuery("ul").find("[data-id='" + current + "']").on("click", function(event){
        console.log("clicked");

        // jQuery('span.share-text').html('<span class="share-text">Shared</span>');
    });

Any and all help is much appreciated. Thank you very much!

Answer 1

You can simply do this

$(".share-facebook").click(function(){
  // $(this).parent("li").append($("<span>").html("shared").addClass("share-text"));
 // $(this).remove();
});​

EDIT: http://jsfiddle.net/NvWVh/24/