单击按钮后显示div jQuery

Question

Hi I try to show a div element in jQuery mobile when the user touch the button. I already created own classes for the button and for the div element, but nothing happens. What classes should I take?

JS:

    $(document).ready(function(){
 $(".commentbtn").on("click", function(e) {
    e.preventDefault(); // in some browsers a button submits if no type=
    $(this).siblings("div.comment").toggle();
});
});

CSS:

.comment {
    display:none;
}

HTML:

<?php foreach ($result as $key => $row): ?>
    <div class="ui-btn-text">
        <button class="commentbtn" data-rel="button">comment</button>
        <div id="createcomment" class="comment" data-theme="a">
            <form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
                <div class="content">
                    <textarea rows="1" name="text" id="text" class="foo"></textarea>
                </div>
            </form>
        </div>
    </div>
<?php endforeach; ?>

Answer 1

Your button has class commentbtn, so you should use that instead of btn-info. Also, you should be looking for the sibling div, not the closest.

$(".commentbtn").on("click", function(e) {
   e.preventDefault(); // in some browsers a button submits if no type=
   $(this).siblings("div.comment").show();
});

JSFiddle demo

Answer 2

You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:

  $(".btn-info").on("click", function(e) {
    e.preventDefault(); // in some browsers a button submits if no type=
    $(this).closest(".comment").children(".comment").show();
  });

You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info

  $(".commentbtn").on("click", function(e) {
    e.preventDefault(); // in some browsers a button submits if no type=
    // Console log the element
    console.log($(this).closest(".comment").children(".comment"));
    // Console log not showing the right element. So you need to get the 
    // sibling of the clicked button
    // Instead of doing - $(this).closest(".comment").children(".comment").show();
    // You can do the following
    $(this).siblings("div.comment").show();
  });

.closest() - looks at the element itself and its parents for a match.

.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Example With .show();

Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)

Example With .toggle();

UPDATE:

Example with .comment shown on load