Question

Okay so we have a mySQL while loop echoing out divs for a certain result.

Here is our code:

<div class="post">
<p>hello World</p>
  <div class="contentSlide">
    <p>Members image on left and comments on the right. Date floated on right, and link to user.</p>
    <br />
    <div class="contact">
        <h3>Post a comment below</h3>
        <p>My <label class="agentsHcard">Listings</label> <small>Only displays for logged in</small></p>

       <form>
            <input type="text" READONLY></input><br />
            <textarea id="testTextarea" class="" type="text" name="comment" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(51, 153, 255);"></textarea><br />
            <div style="float:right;margin-right:40px;">
                <button id="buttonsend" class="medium pink button" value="submit" name="submit" type="submit">Add Comment</button>
            </div>
       </form>
       <br />
    </div>
</div>
<div id="button" class="open">Comments(6) &#x25bc;</div>
</div>

Basically each result has a unique ID in our database, eg: 1, 2, 3, 4, 5

$(document).ready(function(){
  reply=false;
$(".close").live('click',function(){
    if(reply!==true){
    $(".contentSlide, #contact").slideUp();
    $(this).html("Comments(6) \u25bc").removeClass("close").addClass("open");
    }
});
$(".open").live('click',function(){
    $(".contentSlide").slideDown();
    $(this).html("Close \u25b2 <span style='float:right;' onclick='reply=true;'  class='reply' >Post a <a href='javascript:void(0);'>comment</a></span>").removeClass("open").addClass("close");
});
$(".reply").live('click',function(e){

    $("#contact").slideDown(function(){reply=false;});
    $("#button").html("Post and Close \u25b2").removeClass("open").addClass("close");
});
})

We are looking for a way to do this so that each div is given a unique ID, which is passed to the javascript and opens that relevant div.

As it stands, if we have 2 of these results, both of them open when the open class is clicked (obviously).

We know how to do it by duplicating the JS and giving a special ID to each one, but we’re looking for a cleaner way by only using the JS once and making it global.

How can we make it so we only have one piece of javascript, and it runs off an ID? eg:

<div class="contentSlide" id="4">

Thank you.

Answer 1

If you want a single piece of Javascript, then id may not be the way to go. In order to operate on DOM elements related to the clicked element, you might want to use relative traversal functions such as closest(selector) to navigate up to the current target’s “.post” div, then traversing back down to the elements to be manipulated:

$(".close").live('click',function(){
    if(reply!==true){
    $(this).closest(".post").children(".contentSlide, #contact").slideUp();
    $(this).html("Comments(6) \u25bc").removeClass("close").addClass("open");
    }
});

If you did go with an Id based mechanism, you would probably have to do some string manipulation and have the element id’s be the original id with a prefix/postfix (i.e. button_4, contact_4, etc.)