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

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

$(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点击监听器按照Michael Coker的说法绑定你的课程。另外，使用find获取类.arrow-change的子元素以更改其值。

e.g。

<强> 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

＆＃13;

$('.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();
    }
    
});

＆＃13;

<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>

＆＃13;

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

4 个答案: