当我有多个具有相同类的div时,我怎么能只在div上执行动作

时间:2021-04-20 20:33:46

How can i execute the action only on the div,when i have multiple div with same class

当我有多个具有相同类的div时,我怎么能只在div上执行动作

http://jsfiddle.net/kent93/Qw7bw/

when the mouse enter one div , the other div also will have action , how can i solve this

当鼠标输入一个div时,另一个div也会有动作,我该怎么解决这个问题

i want only the div that my mouse goes in take action , not the other, what best solution?

我只想要我的鼠标进行操作的div,而不是其他,什么是最佳解决方案?

5 个解决方案

#1


6  

Change the selector of each position to: $(this).children(".class")

将每个位置的选择器更改为:$(this).children(“。class”)

for example the code $(".fromTopToBottom") will change to $(this).children(".fromTopToBottom")

例如代码$(“。fromTopToBottom”)将更改为$(this).children(“。fromTopToBottom”)

Demo: http://jsfiddle.net/Qw7bw/10/

#2


2  

very simple, use $(this), for example

很简单,例如使用$(this)

$('.mydivclass').mouseover(function(e){
    $(this).css('color','gray'); // Current element
});

If divs are nested then you should use e.stopPropagation() to stop the event bubling.

如果div是嵌套的,那么你应该使用e.stopPropagation()来停止事件冒泡。

#3


1  

What you need is a "current" div concept.

你需要的是一个“当前”的div概念。

  1. At the beginning of mouseenter handler:

    在mouseenter handler的开头:

    $(".trbl").removeClass("current"); $(this).addClass("current");

  2. In your case statement, $(".fromTopToBottom").css({...}) -> $(".current .fromTopToBottom").css({...})

    在你的case语句中,$(“。fromTopToBottom”)。css({...}) - > $(“。current。fromTopToBottom”)。css({...})

For the effect check out http://jsfiddle.net/Qw7bw/7/

为了效果,请查看http://jsfiddle.net/Qw7bw/7/

#4


0  

Use $(this).find(x) rather than $(x) directly when selecting ".fromTopToBottom" and similar classes. This allows jQuery to only select childs of the hovered element http://jsfiddle.net/Qw7bw/6/

选择“.fromTopToBottom”和类似的类时,直接使用$(this).find(x)而不是$(x)。这允许jQuery只选择悬停元素的子元素http://jsfiddle.net/Qw7bw/6/

#5


0  

Use $(this).children(".fromTopToBottom") instead of $(".fromTopToBottom").

使用$(this).children(“。fromTopToBottom”)而不是$(“。fromTopToBottom”)。

This will select divs of the given class inside the element whose handler you are writing.

这将在您正在编写的处理程序的元素内选择给定类的div。

#1


6  

Change the selector of each position to: $(this).children(".class")

将每个位置的选择器更改为:$(this).children(“。class”)

for example the code $(".fromTopToBottom") will change to $(this).children(".fromTopToBottom")

例如代码$(“。fromTopToBottom”)将更改为$(this).children(“。fromTopToBottom”)

Demo: http://jsfiddle.net/Qw7bw/10/

#2


2  

very simple, use $(this), for example

很简单,例如使用$(this)

$('.mydivclass').mouseover(function(e){
    $(this).css('color','gray'); // Current element
});

If divs are nested then you should use e.stopPropagation() to stop the event bubling.

如果div是嵌套的,那么你应该使用e.stopPropagation()来停止事件冒泡。

#3


1  

What you need is a "current" div concept.

你需要的是一个“当前”的div概念。

  1. At the beginning of mouseenter handler:

    在mouseenter handler的开头:

    $(".trbl").removeClass("current"); $(this).addClass("current");

  2. In your case statement, $(".fromTopToBottom").css({...}) -> $(".current .fromTopToBottom").css({...})

    在你的case语句中,$(“。fromTopToBottom”)。css({...}) - > $(“。current。fromTopToBottom”)。css({...})

For the effect check out http://jsfiddle.net/Qw7bw/7/

为了效果,请查看http://jsfiddle.net/Qw7bw/7/

#4


0  

Use $(this).find(x) rather than $(x) directly when selecting ".fromTopToBottom" and similar classes. This allows jQuery to only select childs of the hovered element http://jsfiddle.net/Qw7bw/6/

选择“.fromTopToBottom”和类似的类时,直接使用$(this).find(x)而不是$(x)。这允许jQuery只选择悬停元素的子元素http://jsfiddle.net/Qw7bw/6/

#5


0  

Use $(this).children(".fromTopToBottom") instead of $(".fromTopToBottom").

使用$(this).children(“。fromTopToBottom”)而不是$(“。fromTopToBottom”)。

This will select divs of the given class inside the element whose handler you are writing.

这将在您正在编写的处理程序的元素内选择给定类的div。