javascript - 查找选项 jQuery 不工作(我用错了)

Question

我有一个选项卡，我想用 jQuery 向上/向下滑动。我有一个在 Backbone.js 中构建的工作示例，但如果没有 backbone.js 框架，我似乎无法让它工作。

JSfiddle here

代码比较多，详情在JSfiddle中。我这里有一个简短的版本:

<ol class="sortable row list_item_area"><li pageid="1012" data-ordering="0">
    <div class="panel margin-10 panel-info">
        <div class="panel-heading heading-sm padding-5-important main-handle">
            <div class="pull-left">
                <a class="btn _options-more" data-id="1012" title="Toon/verberg opties"><i class="fa fa-chevron-up"></i></a>
            </div>
        <div class="panel-body no-padding" data-id="1009" style="display: none;">
            <form data-id="1009">
                <CONTENT here>
            </form>
        </div>
    </div>
</div>

我现在拥有的 jQuery 脚本:

$("._options-more").click(function(event){
    var clicked = $(event.currentTarget);
    
    if(clicked.attr('data-id'))
    {
        console.log(clicked.attr('data-id'));
        id=clicked.attr('data-id');
        $(this).find('.panel-body[data-id="'+ id +'"]').show();
        $(this).parent().find('.panel-body[data-id="'+ id +'"]').slideDown();
        clicked.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
        clicked.removeClass('_options-more').addClass('_options-less');
    }

    event.preventDefault();
    });

$("._options-less").click(function(event){
        var clicked = $(event.currentTarget);

        if(clicked.attr('data-id'))
        {
            id=clicked.attr('data-id');
            $(this).find('._options-more[data-id="'+ id +'"]').show();
            $(this).parent().find('.panel-body[data-id="'+ id +'"]').slideUp();
            $(this).find('._more-options-container[data-id="'+ id +'"]').hide();
            clicked.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
            clicked.removeClass('_options-less').addClass('_options-more');
        }

        event.preventDefault();
});

这里有两个市长问题:

1. 选择器未找到面板主体，因此 css 未更改。结果:面板主体保持隐藏状态。
2. 似乎找到了“fa-chevron-down”并将其更改为“fa-chevron-up”，但是第二个脚本不会将其改回吗？

也许我只需要从头开始，但我想通过找出错误来从中学习。因此，我们将不胜感激!

Answer 1

在点击回调中，this将引用被点击的元素，在您的例子中，是 <a>

您可以使用 .closest('.panel')得到.panel元素，然后找到 .panel-body :

$(this).closest('.panel').find('.more-options-container[data-id="' + id + '"]').show();

---

关于 _options-less , 你需要使用 on而不是直接click因为没有 _options-less元素时设置 click听众:

$(".panel").on('click', '._options-less', function (event) {

它将创建一个 click所有人的倾听者._options-less存在于现在和 future 。

on 的文档: http://api.jquery.com/on/