我有一系列由一些数据生成的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>
答案 0 :(得分:0)
尝试使用.remove-text
而不是$.on()
将事件处理程序委托给$.click()
类
$(document).on('click', '.remove-text', function() { //your jquery });
您可以在此处阅读有关jQuery中事件委派的更多信息 - https://learn.jquery.com/events/event-delegation/
答案 1 :(得分:0)
通过绑定到$(".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');
}
})
}
如果您可以提供更完整的示例或小提琴,我可以发布更具体的解决方案,但这是您需要的一般要点。
答案 2 :(得分:0)
使用.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');
}
});
答案 3 :(得分:0)
$('.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;