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的问题，没有课程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（），您可以获得所有需要的元素并进行循环。 documentation;

所以你得到了

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

在这种情况下，我们可以使用一个简单的循环

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

现在每篇文章都有一个用函数绑定的事件。让我们来定义这个功能。

添加班级功能

我将使用＆＃39; addClassToArticleFunction ＆＃39;，但您当然可以在名称上使其更具通用性。也许你想要将此函数用于其他标签或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 fiddle to see it work

循环遍历html页面中的<article> </article>

4 个答案:

已加载页面

添加班级功能

小结