Javascript 单击jquery按钮后显示div

嗨，当用户按下按钮时，我尝试在jQuery mobile中显示一个div元素。我已经为button和div元素创建了自己的类，但是什么也没有发生。我应该上什么课

JS:

CSS:

HTML:

---

你的按钮有类commentbtn，所以你应该用它来代替btn信息。此外，你应该寻找最接近的，而不是最近的

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

演示

您没有任何包含class.btn信息的元素，因此无法从以下位置调用事件：

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

您有一个类为.commentbtn的元素，然后您可以像处理.btn信息一样处理该元素

.closest-查看元素本身及其父元素是否匹配

.sides-获取匹配元素集中每个元素的同级，可选地通过选择器进行筛选

下面是一个使用.toggle的示例；如果您想使用相同的按钮显示/隐藏注释。只是多给你一点看

更新：

---

class.btn info的元素在哪里？如果它不存在，那么你的点击事件是无用的。你在.btn info click上触发了一个事件，但是在你的HTML中没有包含类btn info的元素。请你省去PHP，只粘贴要删除的PHP？PHP标记输出的受影响部分。另外，在你的代码中，我只看到一个带有类注释的元素，这意味着您的click函数无法工作，因为您的代码假定存在多个注释类：.closest.comment.children.comment，谢谢，这可以工作，但当我加载页面时，div会显示出来，我如何更改它，使div仅在单击后显示，如何在您的小提琴中显示？：@克拉默特：你说的是哪个部门？关于这个：我脑子里有剧本，并对它进行了一些编辑。div在pageload显示后变为。@klamertd如果您查看我的两个示例，您将看到它没有显示在pageload上，并且它只显示在按钮Clicked上。在您的示例中，是正确的，但在我的示例中则相反；我如何改变它，或者如何在示例中首先显示它，然后单击按钮隐藏？

<?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; ?>

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

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

  $(".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();
  });