循環 <article> 在html頁面中

Question

我必須遍歷Html文件中的<article>標記，並在單擊時添加其類名，然后刪除所有其他<article>標記中的類名

例如：

 <article onclick="javascript:selectthis(this)">
1
</article>
<article onclick="javascript:selectthis(this)">
11
</article>
<article onclick="javascript:selectthis(this)">
111
</article>
<article onclick="javascript:selectthis(this)">
1111
</article>
<article onclick="javascript:selectthis(this)">
11111
</article>

<script>
function selectthis(THIS) {

 THIS.className = "countrySelected";

  }
</script>

有沒有辦法循環標記並刪除類名，除了最近點擊的類名？ 什么是最好的方法？ 我是否真的必須添加附加到每個<article>標簽的onclick事件？ 因為html文件中可能有很多<article>標簽。 我真的不想將這個onclick事件添加到每個文章標簽中。

任何幫助，將不勝感激。

Answer 1

你沒有標記jQuery ，但我建議在這種特殊情況下使用它，事件冒泡和過濾效果很好。 而不是注冊多個點擊處理程序（正如你指出的那樣），你可以注冊一個soley，並為所有元素共同使用。 jQuery也擅長將事件過濾到特定的選擇器。 我試一試。

以下是如何使用jQuery解決問題的示例：

// Register an event-handler on document, that listens for a 'click' event.
// Only pick up the event from the selector 'article' though, which corresponds
// to only article elements on the page.
$(document).on('click', 'article', function(){
    this.className = "countrySelected"; // this in this context, is the actual DOM-element
});

然后為你的問題刪除所有文章的className ，沒有class countrySelected 。 這也適用於jQuery：

// Find all article-elements, that DON'T have the class countrySelected
// Then remove _all_ the classes it has
// To remove a specific class, use .removeClass('classToRemove')
$('article').not('.countrySelected').removeClass();

所以最后，你可以結合這兩個並做到這一點：

$(document).on('click', 'article', function(){
    $('article').removeClass(); // Remove class from all other first
    this.className = "countrySelected"; // this in this context, is the actual DOM-element
});

Answer 2

添加此jquery：

$("article").click(function() {
  $("article").toggleClass("countrySelected");
});

示例代碼段：

 $("article").click(function() { $(".countrySelected").removeClass("countrySelected"); $(this).addClass("countrySelected"); }); 

 article.countrySelected { background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article>This is article 1</article> <article>This is article 2</article> <article>This is article 3</article> <article>This is article 4</article> <article>This is article 5</article> <article>This is article 6</article> 

由於你沒有標記這個jquery，這里是一個純粹的javascript解決方案：

window.onload = function() {
  // This is a list of all the articles on the page
  var articles = document.querySelectorAll("article");
  for (var i = 0; i < articles.length; ++i) {
    // Loop through each article
    var article = articles[i];
    // Add an event listener for each one
    article.addEventListener("click", function() {
      // Get the previously selected one and deselect it
      var prevSelected = document.querySelector(".countrySelected");
      if (prevSelected != null) prevSelected.classList.remove("countrySelected");
      this.classList.add("countrySelected"); // or for older browsers: this.className = "countrySelected";
    }, false);
  }
}

 window.onload = function() { var articles = document.querySelectorAll("article"); for (var i = 0; i < articles.length; ++i) { var article = articles[i]; article.addEventListener("click", function() { var prevSelected = document.querySelector(".countrySelected"); if (prevSelected != null) prevSelected.classList.remove("countrySelected"); this.classList.add("countrySelected"); // or for older browsers: this.className = "countrySelected"; }, false); } } 

 .countrySelected { background-color: orange; } 

 <article>Article 1</article> <article>Article 2</article> <article>Article 3</article> <article>Article 4</article> <article>Article 5</article> 

Answer 3

假設您在每個文章上放置了一個onclick ..在函數內部，您可以這樣做：

function selectthis(THIS) {

    //remove the css classes from all articles
    var articles=document.getElementsByTagName('article');
    for(var a=0;a<articles.length;a++){
        articles[a].setAttribute('class','');
    }

    //add class back on for this article
    THIS.className = "countrySelected";
}

Answer 4

我會這樣對待它而不使用jQuery。 之所以這樣，將來會更容易理解為什么會發生某些事情。 有時基本的JS更適合使用小調整而不是膨脹的庫。

最好的方法是啟動，目前還沒有發生任何事情，只是加載了頁面。 而不是使用內嵌onclick的javascript。 首先分配一個事件監聽器。

頁面已加載

使用Element.getElementsByTagName（），您可以獲得所有需要的元素並進行循環。 文件 ;

所以你得到了

var articleTags = document.getElementsByTagName('ARTICLE');

在這種情況下，我們可以使用簡單的循環

var articleDOM = null;
for(var i = 0; i < articlesTags.length; i++){
    articleDOM = articlesTags[i];
    articleDOM.addEventListener("click", addClassToArticleFunction);
)

現在每篇文章都有一個用函數綁定的事件。 讓我們定義那個功能。

添加類功能

我將使用' addClassToArticleFunction '，但你當然可以使它在名稱上更通用。 也許你想要將此函數用於其他標簽或DOM元素。

function addClassToArticleFunction(){
    this.className = "countrySelected";

}

每次調用此類時都將定義該類。 只有你當然會遇到問題所有人都會獲得該類名。

因此，我們只需調用一個將執行所有刪除操作的函數。

function addClassToArticleFunction(){
    deleteClassNameFromArticles();
    this.className = "countrySelected";
}


function deleteClassNameFromArticles(){
     //deletion here
}

由於我們已經知道所有文章，並且知道如何調用類名，因此它是一個簡單的復制粘貼

for(i = 0; i < articleTags.length; i++){
    articleDOM = articleTags[i];
    articleDOM.className = "";
}  

此時已完成。

概括

• 加載窗口
• 為文章分配事件監聽器
• 當點擊文章時，將調用一個函數
• 此函數將刪除文章中的所有類名
• 此函數將在單擊的文章上分配一個類名

JS小提琴看它有效