Question

所以我有这个布局：

   <div class="sidebar">
   <div class="tabs">
      <div class="comments">
         <a href="#" class="c_button">Comments</a>
      </div>
      <div class="todo">
         <a href="#" class="t_button">To Do list / notes</a>
      </div>
      <div class="content">
         <div class="comments_cnt">
            Comments
            <form>
               <input type="text" value="write" id="post">
            </form>
            <br />
            <a href="javascript:void(0)" onclick="post()">Post it</a> <br />
         </div>
         <div class="todo_cnt">
            To do
         </div>
      </div>
   </div>
</div>

这是jquery：

   <script>
    $(document).ready(function() {
        $(".c_button").click(function() {
            {
                $(".todo_cnt").css("opacity", "0");
            } {
                $(".comments_cnt").css("opacity", "1");
            } {
                $(".comments").css("border-bottom", "0px")
            } {
                $(".todo").css("border-bottom", "1px solid black")
            }
        })
        $(".t_button").click(function() {
            {
                $(".todo_cnt").css("opacity", "1");
            } {
                $(".comments_cnt").css("opacity", "0");
            } {
                $(".comments").css("border-bottom", "1px solid black");
            } {
                $(".todo").css("border-bottom", "0px")
            }
        })
    })
</script>
<script>
    function post() {
        var post = $("#post").val(); {
            $('.comments_cnt').append('<div class="post_unrslvd">' + post + '<p><a href="#" class="resolve_button">Mark as resolved.</a></p></div>');
        } {
            $("#post").val('');
        }
        $('.resolve_button').click(function() {
            $(this).parents(".post_unrslvd").toggleClass('post_rslvd');
        });
    };
</script>

我希望能够添加以后可以标记为已解决的帖子。问题是toggleClass函数仅适用于每一个帖子，我无法理解为什么？

Answer 1

问题是你要向元素添加重复的事件处理程序......

function post() {
    var post = $("#post").val();
    $('.comments_cnt').append('<div class="post_unrslvd">' + post + '<p><a href="#" class="resolve_button">Mark as resolved.</a></p></div>');
    $("#post").val('');
};

//dom ready handler
jQuery(function ($) {
    //delegated event handler
    $('.comments_cnt').on('click', '.resolve_button', function () {
        $(this).closest(".post_unrslvd").toggleClass('post_rslvd');
    })
})

演示：Fiddle

在第一次调用中，resolve_button有一个点击处理程序，因此切换效果很好......但是当第二次调用post时，resolve_button在第一次调用中添加的按钮将获得另一个单击处理程序（现在它有2个处理程序）...所以切换调用两次从而否定了效果。

演示：Problem - 查看控制台，了解它被调用的次数

Answer 2

您的脚本正在等待调用post函数，然后它正在等待单击“解析”按钮。

$("document").ready(function(){$('.resolve_button').click(function() {
    $(this).parents(".post_unrslvd").toggleClass('post_rslvd');
});
});

应该做的伎俩

jQuery函数仅适用于每一秒

2 个答案: