jQuery click()函数里面的each()

Question

谁能帮我一下这段代码?我不明白是什么出了问题，为什么它不执行。谢谢。

var i = 0;
$('.course-testimonial-wrapper .testimonial-content-text').each(function() {
// console.log(i);
$(this).attr('id', 'testimonial-' + i);
$(this).append('<div class="description-overlay" id="d-over-' + i + '"></div>');
$(this).after('<div><button class="btn green show-more-' + i + ' shadow-0 p-0 medium" style="font-size: 14px;">Mostra di più <i class="fi-rr-angle-small-down"></i></button></div>');
$('.show-more-' + i + '').click(function() {
$('#testimonial-' + i + '').toggleClass('expand');
$('#d-over-' + i + '').toggleClass('d-none');
if ($('#testimonial-' + i + '').hasClass('expand')) {
$('.show-more-' + i + '').html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
} else {
$('.show-more-' + i + '').html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
}
})
i++;
})

Answer 1

您不需要使用i来使其更具动态性。你可以这样做。

$('.show-more').click(function() {
var testimonial = $(this).parent().prev();
testimonial.toggleClass('expand');
testimonial.find('.description-overlay').toggleClass('d-none');
if (testimonial.hasClass('expand')) {
$(this).html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
} else {
$(this).html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
}
})

$('.testimonial-content-text').each(function(i, x) {
// console.log(i);
$(this).attr('id', 'testimonial-' + i);
$(this).append('<div class="description-overlay" id="d-over-' + i + '"></div>');
$(this).after('<div><button class="btn green show-more shadow-0 p-0 medium" style="font-size: 14px;">Mostra di più <i class="fi-rr-angle-small-down"></i></button></div>');

})
$('.show-more').click(function() {
var testimonial = $(this).parent().prev();
testimonial.toggleClass('expand');
testimonial.find('.description-overlay').toggleClass('d-none');
if (testimonial.hasClass('expand')) {
$(this).html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
} else {
$(this).html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-content-text">test1</div>
<div class="testimonial-content-text">test2</div>

Answer 2

问题与i变量的作用域有关。当你的循环完成时，i将是它在迭代中设置的最终值。你可以用闭包来解决这个问题。

然而，一个更好的方法是去掉不必要的增量id和class属性，而使用通用的类名。然后，您可以遍历DOM以查找相关元素并根据需要更新它们，所有这些都在一个委托事件处理程序中完成，该事件处理程序在循环之外创建一次。试试这个:

$('.course-testimonial-wrapper .testimonial-content-text').each(function() {
$(this).append('<div class="description-overlay">Description overlay...</div>');
$(this).after('<div><button class="btn green show-more shadow-0 p-0 medium">Mostra di più <i class="fi-rr-angle-small-down"></i></button></div>');
});
$('.course-testimonial-wrapper').on('click', '.show-more', function() {
let $btn = $(this);
let $content = $btn.closest('.course-testimonial-wrapper').find('.testimonial-content-text').toggleClass('expand');
$content.find('.description-overlay').toggleClass('d-none');
if ($content.hasClass('expand')) {
$btn.html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
} else {
$btn.html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
}
});

.show-more {
font-size: 14px;
}
.d-none {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-testimonial-wrapper">
<div class="testimonial-content-text"></div>
</div>