Question

所以我整天都在阅读Mozilla的js文档，试图解决这个问题。我仍然是一个使用JavaScript的新手，而且我打算学习这些东西，但是我真的很沮丧，我无法理解它并继续我的项目的其余部分。

This codepen是我到目前为止所拥有的。我正在尝试更改#bear的类以反映每个.thing类的mouseOver和MouseOut事件。该课程应该是：过去的事件，然后是破折号，然后是当前事件。

希望这些评论能够说明我正在努力实现的目标。我确信我在这里做的一切都是错的，但是我真的不知道怎么继续修复它。

有人可以帮助我吗？

以下JAVASCRIPT参考

while(entry.reset(readdir(m_dir.get())), entry)
    puts(entry->d_name);

Answer 1

getElementsByClassName返回一个集合 - 所以你必须迭代集合并创建你的绑定：

var elems = document.getElementsByClassName("thing");
for (var i = 0; i < elems.length; i++) {
    elems[i].onmouseover = function() {
        //replace #bear's class to reflect mouse history
        document.getElementById("bear").className = thing + "-thing" + this.getAttribute("data-thing");
        //update var thing
        thing = "thing" + this.getAttribute("data-thing");
    }

    elems[i].onmouseout = function() {
        //replace #bear's class to reflect mouseOut 
        document.getElementById("bear").className = thing + "-nothing";
       //update var thing to reflect mouseOut
       thing = "nothing";
   }
}

示例：http://codepen.io/anon/pen/yNrVEy＆＃39;

此外，.attr是一个jQuery方法 - 您需要使用getAttribute作为vanilla JS

Answer 2

第一件事：document.getElementsByClaassName（class）返回一个ARRAY。所以你不能用它做一个点属性赋值。

相反：

var thing = "nothing";
var thingies = document.getElementsByClassName("thing");
for (i=0;i<thingies.length;i++){
    thingies[i].onMouseOver = function() {
        document.getElementById("bear").className = thing + "-thing" + this.attr("data-thing");
        thing = "thing" + this.attr("data-thing");
    };
    thingies[i].onMouseOut = function() {
        document.getElementById("bear").className = thing + "-nothing";
        thing = "nothing";
    };
}

Answer 3

如果你愿意使用jQuery，这是另一种方法：

var thing = "nothing";
$(".thing").hover(function(){

    var newclass=thing + "-thing" + $(this).attr("data-thing");
    $("#bear").addClass(newclass);
    thing = "thing" + $(this).attr("data-thing");
}, function(){
     $("#bear").addClass(thing + "-nothing");
     thing = "nothing";

})

如何更新另一个元素的鼠标事件上的元素类？

3 个答案: