附加HTML，但有单独的淡入在文档点击

Append HTML but have separate fadeIn on document click

本文关键字：淡入 文档 单独 HTML 附加      更新时间：2023-09-26

每当用户单击页面上的任何位置时，我都会添加一个div。我想让div's淡出，但我第一次这样做的方式每个追加的div都有相同的ID。如果我想让每个字母div分别淡出，这是一个问题。所以我尝试使用计数来让我附加的每个div都有一个单独的名称，但这不起作用。每次添加一个新的div时，所有添加的div都会消失，而不仅仅是最近添加的div。我该如何改变这一点?

var count = 0;
if(firstLetter != "") {
    count++;
    //Create a new circle letter by inserting new div class
    $("p").append('<div class="circle' + count +'" style="border-radius: 50%;width:    36px;height:36px;padding:8px;background:#FF7D5C;color:black;text-align:center;font:32px Arial, sans-serif;display:inline-block;margin-right:4px;margin-bottom:4px;">' + firstLetter.toUpperCase() + '</div>').hide().fadeIn('slow');
}

试试这个。在你的代码中，所有div都发挥了作用因为你调用的所有函数返回的元素都是

元素

$("p").append('<div class="circle' + count +'" style="border-radius: 50%;width:    36px;height:36px;padding:8px;background:#FF7D5C;color:black;text-align:center;font:32px Arial, sans-serif;display:inline-block;margin-right:4px;margin-bottom:4px;">' + firstLetter.toUpperCase() + '</div>');
$("p").children().last().hide().fadeIn();

或者更简单的方法

$("p div:last").hide().fadeIn();
相关文章：