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

Question

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

JSfiddle在这里

这是很多代码，所以细节在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，因为在设置click侦听器时没有_options-less元素：

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

它将为现在和将来存在的所有._options-less创建一个._options-less侦听器。

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