Question

我在DIV中有3个JQuery函数。如果我单击一个红色边框（div）内的每个文本，则文本将变成不同的颜色，并且会执行其他操作。单击所有文本后，我想通过单击底部的“全部重置”将所有文本重置为初始设置。

问题：“全部重置”中的功能不起作用。它应该重新加载红色边框内的元素，而不是整个页面。

请帮助。谢谢！

HTML

<span class="yellow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,</span>
<div class="red-border">
   <div class="turn-red">
     Turn me red
   </div>
   <div class="turn-blue">
     Turn me blue.<span class="text-add">text is added</span>
   </div>
   <div class="turn-green">
     Turn me green
   </div>
</div>
<div class="reset">
Reset all
</div>

JS

$(document).ready(function(){
//let originalState = $('.red-border').html();
$('.turn-red').click(function() {
    $(this).css('color', 'red');
});
$('.turn-blue').click(function() {
    $(this).css('color', 'blue');
  $('.text-add').fadeIn();
});
$('.turn-green').click(function() {
    $(this).css('color', 'green');
});
$('.reset').click(function() {
    $('.red-border').load();
});
});

Answer 1

您可以尝试使用此功能

$('.reset').click(function() {
  $('.red-border div').each(function(){
    $(this).css('color','black');
  });
});

对不起，我的英语不太好。

清除DIV中的所有功能

1 个答案: