javascript函数事件...从一个函数发送到另一个 - 也许很简单

这里有一个小故事...我想做一个for循环，使make的addenventlisteners，所以当我移动：hover/onmouseover它应该换成2种颜色。但我无法弄清楚如何获取关键字到功能redB ...javascript函数事件...从一个函数发送到另一个 - 也许很简单

但我不知道如果我的分辩方式...

$(document).ready(function() { 
 
    var i; 
 
    for (i = 0; i < 10; i++) { 
 
    document.getElementById("sek2" + i +).addEventListener("mouseover", Over(this)); 
 
    document.getElementById("sek2" + i +).addEventListener("mouseout", Out(this)); 
 
    } 
 
}); 
 

 
function greyB(x) { 
 
    x.style.backgroundColor = "grey"; 
 
} 
 

 
function redB(x) { 
 
    x.style.backgroundColor = "red"; 
 
}

来源

2017-06-01 jokerper

'阅读进度（ “鼠标悬停”，greyB）'和'阅读进度（ “鼠标移开”，redB）' – Satpal

一些建议，使用[querySelectorAll ]（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll）作为选择器，然后将sek2分配给页面上的所有10个元素。不需要使用ID来处理非常相似的元素。 – Neil

是的，但他也必须改变功能本身。 'x'将是事件，它们应该是'x.target.style.backgroundColor' – Ematipico

您呼叫的错误function名称，如果你使用$(document).ready()你需要啊jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS代码

$(document).ready(function() { 
     var i; 
     for (i = 0; i < 10; i++) { 
     document.getElementById("sek2" + i +).addEventListener("mouseover", greyB); 
     document.getElementById("sek2" + i +).addEventListener("mouseout", redB); 
     } 

    }); 

    function greyB() { 
     this.style.backgroundColor = "grey"; 
    } 

    function redB() { 
     this.style.backgroundColor = "red"; 
    }

来源

2017-06-01 13:19:43 prasanth

使用香草的javascript，接近目前的代码，这是那么容易，因为：

var i; 
 
for (i = 0; i < 1; i++) { 
 
    document.getElementById("sek2" + i).addEventListener("mouseover", function(){ greyB(this); }); 
 
    document.getElementById("sek2" + i).addEventListener("mouseout", function(){ redB(this); }); 
 
} 
 

 
function greyB(x) { 
 
    x.style.backgroundColor = "grey"; 
 
} 
 
function redB(x) { 
 
    x.style.backgroundColor = "red"; 
 

 
}

<div id="sek20">Mouse over me</div>

如果使用jQuery这是更简单：

$("[id^='sek2']").on('mouseover', function(){ 
 
    $(this).css('background-color','grey'); 
 
}).on('mouseout',function(){ 
 
    $(this).css('background-color','red'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sek20">Mouse over me</div>

来源

2017-06-01 13:20:00 Jamiec

嗨，你可以请给出一个解释：[id^='sek2_'] [attribute^= value] \t $（“[标题^ ='Tom']“）\t标题属性值以”Tom“开头的所有元素---- SORRY – jokerper

@jokerper您正在寻找”id“以”sek2“开头的项目 - ”[id^='sek2']'作为选择器就是这样！但是你不应该使用id，你应该使用一个类 - 那么选择器就是'.myclass'。 – Jamiec

你能否告诉我语言哪里可以看得更远，因为它看起来像一种非常好的语言。也许是一个链接左右。 – jokerper

是这样的，你在找什么？

$(document).ready(function() { 
 
    var i; 
 
    for (i = 0; i < 10; i++) { 
 
    let newDiv = document.createElement('div'); 
 
    newDiv.classList.add('square'); 
 
    newDiv.addEventListener("mouseover", greyB); 
 
    newDiv.addEventListener("mouseout", redB); 
 
    document.querySelector('body').appendChild(newDiv); 
 
    } 
 
}); 
 

 
function greyB() { 
 
    this.style.backgroundColor = "grey"; 
 
} 
 

 
function redB() { 
 
    this.style.backgroundColor = "red"; 
 
}

.square { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来源

2017-06-01 13:24:28 GOB

我用此溶液结束，但任何人都可以告诉那里去获取有关该代码的详细信息。什么样的语言可能是某个地方的链接。所以我没有得到不同的代码来进一步玩。

谢谢...

var i; 
 
for (i = 0; i < 1; i++) { 
 
    document.getElementById("sek2" + i).addEventListener("mouseover", function(){ greyB(this); }); 
 
    document.getElementById("sek2" + i).addEventListener("mouseout", function(){ redB(this); }); 
 
} 
 

 
function greyB(x) { 
 
    x.style.backgroundColor = "grey"; 
 
} 
 
function redB(x) { 
 
    x.style.backgroundColor = "red"; 
 

 
}

<div id="sek20">Mouse over me</div>

来源

2017-06-02 14:56:47 jokerper

javascript函数事件...从一个函数发送到另一个 - 也许很简单

回答

相关问题