1

我正在使用 jQuery 来显示和隐藏每个帖子的编辑选项。这是我正在使用的 jQuery： 

$(document).ready(function () {
    $(".post-menu").click(function () {
        $(".menu-options ul").toggle();
    });
    $(".edit-option").click(function () {
        $("#edit-post").show();
        $(".menu-options ul").toggle();
    });
    $("#never-mind").click(function () {
        $("#edit-post").hide();
    });
})

关于代码的简单介绍：post-menu 是处理显示隐藏事件的 div，edit-options 是<ul>必须弹出包含编辑和删除<li>的内容，#edit-post 是文本区域的 div，提交按钮（它使用ajax jquery；不需要有一个表单），而#never-mind 是一个关闭它的按钮。

div代码是：

<div class="post-menu">
    <div style="width: 20px; height: 8px;" >Options</div>
    <div class="menu-options">
        <ul>
            <li class="edit-option">Edit</li>
            <li class="delete-option">Delete</li>
        </ul>
    </div>
</div> // I missed this while writing the question, sorry for that!
    <div style="display: none;" id="edit-post">
        <textarea id="new-post-message">@row.Message</textarea>
        <br>
        <button onclick="updatepost(@row.PostId)">Save</button>
        <button id="never-mind">Never mind</button>
        <div class="error-post"></div>
    </div>

期望行为：仅显示所选帖子的选项面板。

当前行为：问题在于，当我只想显示所选帖子的选项面板时，它会取消隐藏每个帖子的选项面板。

我究竟做错了什么？

4

4 回答 4

2

<div style="width: 20px; height: 8px;" />Options</div>不是我们应该关闭 DIV 元素的方式（注意/>）

ID如果你想处理多个元素，请避免使用正确的选择器来完成诸如此类的工作$(this).next()......你就完成了。

于 2013-08-20T19:30:51.653 回答
2

假设您有多个带有该类的 div，并且post-menu您需要其相应的菜单选项来根据上下文进行切换。这就是你需要的。

$(".post-menu").click(function (e) {
    $(this).find(".menu-options ul").toggle();
});

编辑：正如@Roko 提到的......如果你不想冒泡事件传播......

利用e.stopPropagation()

于 2013-08-20T19:23:10.160 回答
1

对于具有多个条目的 jfiddle 会很有用，但我认为您只需要添加 $(this)

此外，您可能需要将菜单选项转换为 ID 而不是类

$(document).ready(function () {
 $(".post-menu").click(function () {
    $(this).(".menu-options ul").toggle();
});
$(".edit-option").click(function () {
    $(this).("#edit-post").show();
    $(this).(".menu-options ul").toggle();
});
$("#never-mind").click(function () {
    $(this).("#edit-post").hide();
});
})
于 2013-08-20T19:24:47.080 回答
1

我参加聚会有点晚了，但这是我的回应。

jsFiddle在这里

您在这里有一些问题（这就是为什么需要一段时间才能发布此内容）。

  1. 如果您使用循环输出用户帖子，则 ID 将重复。这是一个禁忌。请使用类，或为每个 ID 添加唯一标识符。查看添加到每个后菜单 div 的 ID。
  2. 您的 jQuery 说当用户单击“post-menu”div 时切换 UL 元素，但如果他们单击“post-menu”div 内的“edit”项，也会切换相同的元素。换句话说，当用户单击 EDIT 按钮时，这两个事件都会触发，并且 UL 将切换两次。使用 e.stopPropagation() 来避免这种情况。
  3. 由于您不能可靠地知道单击项目附近元素的唯一next()ID，因此您应该使用 jQuery DOM 遍历选择器，例如or parent()。看我的例子。
  4. 您可以看到我在查找正确元素时如何提醒找到的元素 ID。我离开这些测试只是为了向您展示如何做到这一点。

修改后的 HTML：

<div class="post-menu" id="PostMenu1">
    <div style="width: 20px; height: 8px;" id="OptionsDiv">Options</div>
    <div class="menu-options">
        <ul id="myUL" class="myUL">
            <li class="edit-option">Edit</li>
            <li class="delete-option">Delete</li>
        </ul>
    </div>
</div>
<div style="display: none;" class="edit-post">
    <textarea id="new-post-message">@row.Message1</textarea>
    <br>
    <button class="savebutt" onclick="updatepost(@row.PostId)">Save</button>
    <button class="never-mind">Never mind</button>
    <div class="error-post"></div>
</div>
<!-- ---------------------------------------------------------- -->
<div class="post-menu" id="PostMenu2">
    <div style="width: 20px; height: 8px;">Options</div>
    <div class="menu-options">
        <ul>
            <li class="edit-option">Edit</li>
            <li class="delete-option">Delete</li>
        </ul>
    </div>
</div>
<div style="display: none;" class="edit-post">
    <textarea id="new-post-message">@row.Message2</textarea>
    <br>
    <button onclick="updatepost(@row.PostId)">Save</button>
    <button class="never-mind">Never mind</button>
    <div class="error-post"></div>
</div>

修改后的查询：

$(".post-menu").click(function () {
    $(this).find(".menu-options ul").toggle();
});
$(".edit-option").click(function (e) {
    $(this).find(".edit-post").show();
    //var x = $(this).closest('div').parent().next().attr('class');
    //alert(x);

    //$(this).parent().parent().find('ul').toggle();
    $(this).closest('div').parent().next().toggle();
    e.stopPropagation();
    //var x = $(this).parent().parent().find('ul').attr('class');
    //alert(x);
});
$(".never-mind").click(function () {
    //var x = $(this).closest('div').attr('class');
    //alert(x);
    $(this).closest('div').hide();
});
$('.delete-option').click(function(e) {
    var x = $(this).closest('div').parent().attr('id');
    alert('Deleting DIV with ID: ' + x);
    e.stopPropagation();

});
于 2013-08-20T20:11:44.997 回答