[英]jQuery function doesn't work in a JavaScript for-loop. Please Help
I've posted variations of this question before and just as I think I've got it, it doesn't work again. 我之前已经发布了这个问题的变体,正如我认为的那样,它不再起作用。
I figured out the problem though, but have no answer. 我虽然发现了问题,但没有答案。 When I execute this code it works just fine:
当我执行此代码时,它可以正常工作:
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
for (j=0;j<3;j++) {
var $eqn = "ul.side-block-content li:eq("+i+") .article-title a span";
}
$($eqn).replaceWith($titleMarquee+$(this).text()+"</marquee>");
}
But as soon as I put in an event like .mouseenter it screws up and stops working: 但是,一旦我输入.mouseenter之类的事件,它就会拧紧并停止工作:
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
for (j=0;j<3;j++) {
var $eqn = "ul.side-block-content li:eq("+i+") .article-title a span";
}
$($eqn).mouseenter(function(){
$($eqn).replaceWith($titleMarquee+$(this).text()+"</marquee>");
});
}
What else is strange that I've figured out is part of the problem is when both the .event and .replaceWith have a variable. 我想出的还有一个奇怪的问题是当.event和.replaceWith都具有变量时。 If I just assign a variable to the .mouseenter and use $(this) for .replaceWith it works fine but restricts me from what I want to do.
如果我只是为.mouseenter分配一个变量,并为$ .replaceWith使用$(this),它可以正常工作,但限制了我的工作范围。 I can't even use ("+i+").
我什至不能使用(“ + i +”)。
This is what I want to achieve with the script and it doesn't work this way. 这是我想通过脚本实现的功能,因此无法正常工作。 Please help.
请帮忙。
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
for (j=0;j<3;j++) {
$("ul.side-block-content li:eq("+i+")").mouseenter(function(){
$("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$(this).text()+"</marquee>");
});
}
}
How about something like this instead: 像这样的事情怎么样:
$("ul.side-block-content li").mouseenter(function() {
var $this = $(this);
var $titleMarquee =
$('<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"></marquee>');
$(".article-title a span", $this)
.replaceWith($titleMarquee.text($this.text()));
});
Here's a working example: http://jsfiddle.net/mXtmB/ 这是一个工作示例: http : //jsfiddle.net/mXtmB/
If you want to limit the li
elements so that the event is applied to to the first 6: 如果要限制
li
元素,以便将该事件应用于前6个:
for (var i = 0; i <= 5; i++) {
$("ul.side-block-content li:eq(" + i + ")").mouseenter(function() {
var $this = $(this);
var $titleMarquee =
$('<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"></marquee>');
$(".article-title a span", $this)
.replaceWith($titleMarquee.text($this.text()));
});
}
It's hard for me to test it right now, check if this is working. 我现在很难对其进行测试,检查它是否有效。
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
var i, j; // important
for (i=0;i<=5;i++) {
(function (i) {
$("ul.side-block-content li:eq("+i+")").mouseenter(function(){
$("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$(this).text()+"</marquee>");
});
}(i));
}
I also deleted that pointless loop. 我还删除了无意义的循环。
When you use the $eqn
variable to access the element, you will be accessing the last element, as the value of the variable has changed since you hooked up the event. 使用
$eqn
变量访问元素时,将访问最后一个元素,因为自连接事件以来变量的值已更改。 Use the this
keyword to access the element that the event is hooked up to: 使用
this
关键字可以访问事件所关联的元素:
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
$("ul.side-block-content li:eq("+i+") .article-title a span").mouseenter(function(){
$(this).replaceWith($titleMarquee+$(this).text()+"</marquee>");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.