Question

我有一个标签，我想用jQuery向上/向下滑动。我在Backbone.js中有一个工作示例，但是如果没有backbone.js框架，我似乎无法工作。

这是很多代码，所以细节都在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();
});

这里有两个市长问题：

选择器找不到面板主体，因此不会更改css。结果：面板体保持隐藏状态。
似乎找到了“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侦听器。

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

找到选项jQuery无法正常工作（我使用它错了）

1 个答案: