当用户继续进行下一次点击时，如何让 JavaScript 清除之前的 onclick 元素？

Question

比如说，我有一个 HTML 站点，其中包含多个部分。

<html>
 .
 .
 .
<body>

<section class="" id="text1" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text2" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text3" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>
  <!-- and so on --------->
</body>
</html>

网站有两个简单的 css 规则；一个用于 "normal sections"，另一个用于 "active sections".

<style>
section {
    margin-left: 10px;
    padding: 10px;
    position: relative;
    border-style: solid;
    border-width: 2px;

     box-sizing: border-box;
    width: 50%;
    float: left;
 }

section.active {
 width: 300px;
 height: 100px;
 background-color: yellow;
 box-shadow: 10px 10px 5px #888888;
}
</style>

javascipt 的 .onclick 属性有助于定位被点击的部分。一旦我们有了点击部分，它的 class 属性设置为 "active" 所以 section.active CSS 可以像这样应用：

Window.onload = init;
function init() {
var Elems = document.getElementsByName("texts")
for (var i = 0; i<Elems.length; i++) {
    Elems[i].onclick = dothis;
};

function dothis(eventObj) {
    var Celm = eventObj.target;
    var name = "active";
    Celm.className= name;
}
};

到目前为止一切顺利，但在这里我失去了控制力。如何让代码一次只标记一个活动部分？现在，它会在单击时将多个部分标记为活动状态。但我想做的是，一旦检测到活动部分，它应该自动清除最后单击或活动部分，代表 "only one active section at one time"。非常感谢。

Answer 1

从所有部分中删除 class名称 active 并仅为所需部分设置 active class。

Window.onload = init;
function init() {
var Elems = document.getElementsByName("texts");
for (var i = 0; i<Elems.length; i++) {
    Elems[i].onclick = dothis;
};

function dothis(eventObj) {    
    var Celm = eventObj.target;
    var name = "active";
    var Elems = document.getElementsByName("texts");

    // This will remove the className active from all sections
    Elems.className = Elems.className.replace( /(?:^|\s)active(?!\S)/ , '' );

    // Once all active sections are cleared, this selects the required section
    Celm.className= name;
}
};

Answer 2

为了让 "Active" class 只出现在一个元素上，您必须删除之前使用 class [=] 选择的元素的 "active" class 23=].

如果你想用jQuery来做，你可以简单地写下面的代码。

$('.Active').removeClass('Active');

使用Javascript:

好吧，没有使用 javascript 删除 class 的内置方法。你可以写一个自定义函数 "removeClass" 如下所示，然后直接这样调用它： removeClass('Active');

function removeClass(className) {
    // convert the result to an Array object
    var els = Array.prototype.slice.call(
        document.getElementsByClassName(className)
    );
    for (var i = 0, l = els.length; i < l; i++) {
        var el = els[i];
        el.className = el.className.replace(
            new RegExp('(^|\s+)' + className + '(\s+|$)', 'g'),
            ''
        );
    }
}

Answer 3

试试这个

$(function(){

 $('section').on('Click',function(){
  $('section.active').removeClass('active');
  $(this).addClass('active');

  });

})

您可以从 jquery.com 下载 jquery 这里是 documentation

Answer 4

http://jsfiddle.net/nL0kau9u/1/

function dothis(eventObj) {
    var Celm = eventObj.target;
    var name = "active";
   for (var i = 0; i<Elems.length; i++) {
       if(Elems[i]!=Celm) {
           Elems[i].className='';
       }
       else {
           Elems[i].className=name;
       }
};

}
};

Answer 5

函数执行此操作（eventObj）{

var x = document.getElementsByClassName("active");    
for (var i = 0; i < x.length; i++) {    
    x[i].className = "";    
}


var Celm = eventObj.target;
var name = "active";
Celm.className= name;

}

Answer 6

又来一个，玩得开心^^

init();
function init() {

}

function dothis(test) {
    var Celm = test;    
    var classItem = document.getElementsByClassName("active");
    if (classItem.length > 0){        
        classItem[0].className = "";
        var name = "active";
        Celm.className= name;
    }else{        
        var name = "active";
        Celm.className= name;
    }
}

section {
    margin-left: 10px;
    padding: 10px;
    position: relative;
    border-style: solid;
    border-width: 2px;

     box-sizing: border-box;
    width: 50%;
    float: left;
 }

section.active {
 width: 300px;
 height: 100px;
 background-color: yellow;
 box-shadow: 10px 10px 5px #888888;
}

<section class="" id="text1" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text2" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text3" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

Answer 7

通过使用jQuery查看以下函数 http://api.jquery.com/removeclass/

和 http://api.jquery.com/addClass/

最后但并非最不重要的 http://api.jquery.com/toggleClass/

问候 R

当用户继续进行下一次点击时，如何让 JavaScript 清除之前的 onclick 元素？

How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

html

javascript

css

dom