Javascript 如何访问CSS中动态生成的HTML文件id以及与之关联的JS文件

我正在用HTML创建一个博客页面。在后端，我使用Django。我为每个帖子创建了一个通用的HTML模板。在Django admin中，当我上传图像和其他数据时，我将在前端获取它，并使用从后端自动生成的id动态设置每篇文章的id。 我的HTML模板是这样的

{对于博客中的博客，{u post%}
{{blog.title}

{{blog.description}}

{%if blog.url%}
{%endif%}
{%endfor%}

展开@charlietfl注释

首先，让我们创建一个名为

每个卡的公共类。并且，为
活动类
指定样式<代码>活动类

将添加到单击的元素中

摘自

功能更改激活（elem）{
对于（变量i=0；i
。活动卡{
背景：水鸭；
}

{{blog.title}}1

{{blog.description}}

{{blog.title}

{{blog.description}}

此解决方案需要jQuery才能工作

假设你通过迭代有很多卡片，
使用

您可以使用event.target执行许多其他操作。只需谷歌搜索即可。
在Javascript中使用“event.target”，完全不需要id。只需使用更具体的通用类名，如“card”或“post”，并切换另一个“selected”或“active”类型的类名。访问选择器
“.card.active”
非常简单，可以删除活动类并将其添加到所需的类中clicked@charlietfl你能详细说明一下吗？我不明白你说的话。当你点击一个元素时，你可以在你创建的侦听器的事件处理程序中访问这个特定的元素对象。因此，如果你点击“卡片”，当你选择时，你会在上面为不同的样式设置另一个类。但在此之前，请查找该活动/选定类的其他实例，并将其从先前的选择中删除。你的css就像
.card{color:blue；}.card.active{color:red}
为每个blog.id编写css是不可伸缩的。您不希望每次写新文章时都添加新的样式规则。两个类规则将涵盖postsOP的整个集合。选择后，希望更改样式，数据属性有何帮助？谢谢。我已经解释了你说的话，请复习@charlietfl@SoumalyaBhattacharya看看这是不是你问的
  $('.card').on('click',function(event){
      event.target.style.background = red;     //this will change only the background of the card that is clicked    
})