如何在與其關聯的 CSS 和 JS 文件中訪問我的 HTML 文件的動態生成的 ID

Question

我正在用 HTML 創建一個博客頁面。 在后端，我使用 Django。 我為每個帖子創建了一個通用的 HTML 模板。 在 Django admin 中，當我上傳圖像和其他數據時，我在前端獲取它並使用來自后端的自動生成的 id 動態設置每個帖子的 id。 我的 HTML 模板是這樣的

 <div class="row"> {% for blog in blogs_post %} <div class="col-sm-3 offset-sm-1 col-12" id="{{ blog.id }}"> <div class="row"> <div class="col-12"> <img src="{{ blog.image }}" alt=" {{ blog.tittle }}" class="img-fluid"> </div> <div class="col-12"> <h3>{{ blog.tittle }}</h3> <p class="d-none" id="card-body"> <h6>{{ blog.description }}</h6> </p> {% if blog.url %} <a href="{{ blog.url }}" type="submit" role="button" class="btn btn-info">Read more</a> {% endif %} </div> </div> </div> {% endfor %} </div>

我想用這個

 id="{{ blog.id }}"

在我的 CSS 文件和 JS 文件中唯一標識每個帖子並將更改應用於它們。 就像我點擊一張卡片一樣，所有卡片都不應該展開，但只有我點擊的卡片會展開。 為此，我需要在我的 CSS 文件和 JS 文件中訪問動態設置的 id。 我怎樣才能實現它請幫助！

Answer 1

擴展@charlietfl 評論。

首先讓我們創建一個名為each-card的公共類。 並且，給active-class風格。 active-class將被添加到被點擊的元素。

Js 部分取自這里

 function changeActive(elem) { for (var i = 0; i < elem.length; i++) { elem[i].addEventListener("click", function(e) { var current = this; for (var i = 0; i < elem.length; i++) { if (current != elem[i]) { elem[i].classList.remove('active-card'); } else if (current.classList.contains('active') === true) { current.classList.remove('active-card'); } else { current.classList.add('active-card') } } e.preventDefault(); }); }; } changeActive(document.querySelectorAll('.each-card'));

 .active-card { background: teal; }

 <div class="row"> <div class="each-card col-sm-3 offset-sm-1 col-12" data-id="2"> <div class="row"> <div class="col-12"> <img src="img" alt="Title" class="img-fluid"> </div> <div class="col-12"> <h3>{{ blog.tittle }}1</h3> <p class="d-none" id="card-body"> <h6>{{ blog.description }}</h6> </p> <a href="" type="submit" role="button" class="btn btn-info">Read more</a> </div> </div> </div> </div> <div class="row"> <div class="each-card col-sm-3 offset-sm-1 col-12" data-id="2"> <div class="row"> <div class="col-12"> <img src="img" alt="Title" class="img-fluid"> </div> <div class="col-12"> <h3>{{ blog.tittle }}</h3> <p class="d-none" id="card-body"> <h6>{{ blog.description }}</h6> </p> <a href="" type="submit" role="button" class="btn btn-info">Read more</a> </div> </div> </div> </div>

注意：-我跳過了 django 部分，因為它實際上並不是必不可少的。 並且，添加了額外的演示卡。

Answer 2

此解決方案需要 jQuery 才能工作。

假設您通過迭代、使用、

  $('.card').on('click',function(event){
      event.target.style.background = red;     //this will change only the background of the card that is clicked    
})

您可以使用 event.target 做許多其他事情。 只是谷歌它。