Question

嗨我尝试在用户触摸按钮时在jQuery mobile中显示div元素。我已经为按钮和div元素创建了自己的类，但没有任何反应。我应该上几节课？

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

你的按钮有class commentbtn，所以你应该使用它而不是btn-info。此外，您应该寻找sibling div,而不是最近的。

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

JSFiddle演示

Answer 2

您还没有获得课程element的任何.btn-info，因此您无法通过以下方式致电该活动：

  $(".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-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() - 查看元素本身及其父母的匹配。

.siblings - 获取匹配元素集中每个元素的兄弟元素，可选择通过选择器进行过滤。

Example With .show();

这里有.toggle();示例如果您想用相同的按钮显示/隐藏评论。（只是额外的一点，你可以看看）

Example With .toggle();

<强>更新

Example with .comment shown on load

按钮单击jquery后显示div

2 个答案: