为什么我的 jQuery 只切换 HTML 中的第一个箭头？

Question

我有一系列从一些数据生成的 div。它们每个都有一个箭头，应该切换 div 的可扩展部分。但是，只有我的第一个 div 具有切换上下箭头图标以及展开以显示内容的功能。

模板根据后端数据中的实例数量进行多次渲染。

其余的 div 显示箭头，但点击它什么也没做，我认为这意味着 jQuery 也没有运行。我的 jQuery 中的语法是否只允许第一个呈现的 div 具有该功能？

jQuery:

$('.remove-text').click(function () {
    $(this).closest('.card').toggleClass('collapsed');

    if ($('.arrow-change').text() == 'expand_more') {
        $('.arrow-change').text('expand_less');
    } else {
        $('.arrow-change').text('expand_more');
    }
});

HTML：

<template name="printJob">
    <div class="row m-b-0">
        <div class="col s12 m12 l12">
            <div class="card hoverable collapsed">
                <div class="card-content card-content-width">
                    </div>
                    <div class="col s3 m3 l1">
                        <div class="display-inline remove-text" href="#">
                            <i class="material-icons medium-3-rem arrow-change">expand_more</i>
                        </div>
                    </div>
                </div>
                <div class="content dm-gray light">
                    <div class="col s1 m1 l1 more-horiz-col">
                        <i class="material-icons medium-3-rem more-horiz-job dis-inline">more_horiz</i>
                    </div>
                    <div class="col s4 m4 l4 view-edit-col">
                        <div class="label dis-inline view-edit">View/Edit</div>
                    </div>
                    <div class="col s4 m4 l4">
                        <div class="dis-inline right delete-div">DELETE<i class="material-icons medium-3-rem  dis-inline">delete</i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Answer 1

尝试使用 $.on() 而不是像这样的 $.click() 将事件处理程序委托给 .remove-text 类

$(document).on('click', '.remove-text', function() { //your jquery });

您可以在此处阅读有关 jQuery 事件委托的更多信息 - https://learn.jquery.com/events/event-delegation/

Answer 2

通过绑定到$(".remove-text")，您只绑定到第一个实例。

您需要使用 for 循环绑定到所有这些。

// Get all of the expand buttons
var expandbuttons = $(".remove-text");

// Loop over all of the expand buttons
for (var i=0, j=expandbuttons.length; i<j; i++){

    // Bind a click event to each one
    expandButtons[i].on("click", function(){
        $(this).closest('.card').toggleClass('collapsed');
        if ($('.arrow-change').text() == 'expand_more') {
            $('.arrow-change').text('expand_less');
        }
        else {
            $('.arrow-change').text('expand_more');
        }
    })
}

如果您可以提供更完整的示例或提琴，我可以发布更具体的解决方案，但这是您需要的一般要点。

Answer 3

使用.on click listener 来绑定你的类，正如 Michael Coker 所说的那样。另外，使用find 获取类.arrow-change 的子元素来更改它的值。

例如

HTML

<div name="printJob">
<div class="row m-b-0">
    <div class="col s12 m12 l12">
        <div class="card hoverable collapsed">
            <div class="card-content card-content-width">
                </div>
                <div class="col s3 m3 l1">
                    <div class="display-inline remove-text" href="#">
                        <i class="material-icons medium-3-rem arrow-change">expand_more</i>
                    </div>
                </div>
            </div>
            <div class="content dm-gray light">
                <div class="col s1 m1 l1 more-horiz-col">
                    <i class="material-icons medium-3-rem more-horiz-job dis-inline">more_horiz</i>
                </div>
                <div class="col s4 m4 l4 view-edit-col">
                    <div class="label dis-inline view-edit">View/Edit</div>
                </div>
                <div class="col s4 m4 l4">
                    <div class="dis-inline right delete-div">DELETE<i class="material-icons medium-3-rem  dis-inline">delete</i></div>
                </div>
            </div>
        </div>
    </div>
</div>


<div name="printJob">
<div class="row m-b-0">
    <div class="col s12 m12 l12">
        <div class="card hoverable collapsed">
            <div class="card-content card-content-width">
                </div>
                <div class="col s3 m3 l1">
                    <div class="display-inline remove-text" href="#">
                        <i class="material-icons medium-3-rem arrow-change">expand_more</i>
                    </div>
                </div>
            </div>
            <div class="content dm-gray light">
                <div class="col s1 m1 l1 more-horiz-col">
                    <i class="material-icons medium-3-rem more-horiz-job dis-inline">more_horiz</i>
                </div>
                <div class="col s4 m4 l4 view-edit-col">
                    <div class="label dis-inline view-edit">View/Edit</div>
                </div>
                <div class="col s4 m4 l4">
                    <div class="dis-inline right delete-div">DELETE<i class="material-icons medium-3-rem  dis-inline">delete</i></div>
                </div>
            </div>
        </div>
    </div>
</div>

JQuery

$('.remove-text').on('click', function(){
            console.log("click");
    $(this).closest('.card').toggleClass('collapsed');
    if ($(this).find(".arrow-change").text() == 'expand_more') {
        $(this).find(".arrow-change").text('expand_less');
    }
    else {
        $(this).find(".arrow-change").text('expand_more');
    }

});

JS fiddle

Answer 4

$('.card .content').hide();
$('.remove-text').on('click', function () {
    var itemSelector = '#item_' + $(this).attr('data-item');
    var isCollapsed  = $(itemSelector).hasClass('collapsed');     
    var label        = isCollapsed ? 'Show less' : 'Show more';
    
    $(itemSelector).toggleClass('collapsed');
    $(itemSelector + ' .arrow-change').text(label);
    if(isCollapsed) {
        $(itemSelector + ' .content').show();
    } else {
        $(itemSelector + ' .content').hide();
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div name="printJob">
    <div class="row m-b-0">
        <div class="col s12 m12 l12">
            <div class="card hoverable collapsed" id="item_1">
                <div class="card-content card-content-width">
                    <div class="col s3 m3 l1">
                        <div class="display-inline remove-text" data-item="1" href="#">
                            <i class="material-icons medium-3-rem arrow-change">expand_more 1</i>
                        </div>
                    </div>
                </div>
                <div class="content dm-gray light">
                    <div class="col s1 m1 l1 more-horiz-col">
                        <i class="material-icons medium-3-rem more-horiz-job dis-inline">more_horiz</i>
                    </div>
                    <div class="col s4 m4 l4 view-edit-col">
                        <div class="label dis-inline view-edit">View/Edit</div>
                    </div>
                    <div class="col s4 m4 l4">
                        <div class="dis-inline right delete-div">DELETE<i class="material-icons medium-3-rem  dis-inline">delete</i></div>
                    </div>
                </div>
            </div>
            <div class="card hoverable collapsed" id="item_2">
                <div class="card-content card-content-width">
                    <div class="col s3 m3 l1">
                        <div class="display-inline remove-text" data-item="2" href="#">
                            <i class="material-icons medium-3-rem arrow-change">expand_more 2</i>
                        </div>
                    </div>
                </div>
                <div class="content dm-gray light">
                    <div class="col s1 m1 l1 more-horiz-col">
                        <i class="material-icons medium-3-rem more-horiz-job dis-inline">more_horiz</i>
                    </div>
                    <div class="col s4 m4 l4 view-edit-col">
                        <div class="label dis-inline view-edit">View/Edit</div>
                    </div>
                    <div class="col s4 m4 l4">
                        <div class="dis-inline right delete-div">DELETE<i class="material-icons medium-3-rem  dis-inline">delete</i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>