Javascript 循环通过<；文章>；在html页面中

我必须遍历Html文件中的

标记，单击时添加其类名，然后删除所有其他

标记中的类名

例如：

 <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>

1.
11
111
1111
11111
功能选择此（此）{
THIS.className=“countrySelected”；
}

除了最近单击的类名外，是否有方法循环遍历标记并删除类名？最好的方法是什么？我真的需要在每个

标记上添加一个onclick事件吗？因为html文件中可能有许多

标记。我真的不想将这个onclick事件添加到每个文章标记中

任何帮助都将不胜感激。

您没有标记，但我建议在这种特殊情况下使用它，在这种情况下，事件Bubbling和过滤效果很好。不用注册多个点击处理程序（正如您所指出的），您可以单独注册一个，并为所有元素提供一个公共的点击处理程序。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

，而不选择类

country

。这对于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
});

添加此jquery：

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

示例代码段：

$（“文章”）。单击（函数（）{
$（“.countrySelected”）.removeClass（“countrySelected”）；
$（此）.addClass（“countrySelected”）；
});
article.countrySelected{
背景颜色：橙色；
}

这是第一条
这是第2条
这是第3条
这是第4条
这是第5条
这是第6条
假设您在每篇文章上都单击一次。。在函数内部，您可以执行以下操作：

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";
}

功能选择THIS（THIS）{
//从所有文章中删除css类
var articles=document.getElementsByTagName（'article'）；
对于（var a=0；a我将不使用jQuery而这样处理它。原因是，将来使用这种方式更容易理解为什么会发生某些事情。有时，基本JS更适合使用一个小的调整，而不是一个臃肿的库

最好的方法是开始，此时还没有发生任何事情，页面刚刚加载。而不是使用javascript内联onclick。首先分配一个事件侦听器

页面加载
使用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);
)

每次调用该类时，该类都会被定义。只有您在非正常情况下遇到问题，所有人都会得到该类名称

让我们调用一个函数来完成所有的删除操作

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


function deleteClassNameFromArticles(){
     //deletion here
}

因为我们已经知道所有的文章，并且知道如何调用类名，所以这是一个简单的复制粘贴

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

for（i=0；i

在这一点上就完成了

扼要重述

加载窗口
将事件侦听器分配给项目
单击文章时，将调用一个函数
此函数将从项目中删除所有类名
此函数将在单击的文章上指定一个类名

非常好的解释。一步一步的好文章。非常感谢。就我个人而言，我不是Jquery的粉丝。我喜欢这个解决方案，即使它更简单。
for(i = 0; i < articleTags.length; i++){
    articleDOM = articleTags[i];
    articleDOM.className = "";
}