[英]How do you affect a specific element using jquery
(Thank you to anyone kind enough to help) (谢谢任何有帮助的人)
I'm having trouble using the jQuery hover method on a single instance of an element with a class name shared by multiple elements 我在一个元素的单个实例上使用jQuery悬停方法时遇到麻烦,其类名由多个元素共享
Below I have provided my code: 下面我提供了我的代码:
<div class="container">
<div class="c_box">
<div class="img">
<svg hieght="0" width="0">
<defs>
<clipPath id="svgPath">
<circle stroke="#000000" cx="125" cy="235" r="125"></circle>
<rect x="0" y="0" width="250" height="230"></rect>
</clipPath>
</defs>
</svg>
<div class="rectangle">
<div class="semi_circle"></div>
</div>
<span class="text">Painting</span>
</div>
</div>
<div class="triangle"></div>
</div>
<div class="container">
<div class="c_box">
<div class="img">
<svg hieght="0" width="0">
<defs>
<clipPath id="svgPath">
<circle stroke="#000000" cx="125" cy="235" r="125"></circle>
<rect x="0" y="0" width="250" height="230"></rect>
</clipPath>
</defs>
</svg>
<div class="rectangle">
<div class="semi_circle"></div>
</div>
<span class="text">Painting</span>
</div>
</div>
<div class="triangle"></div>
</div>
$(document).ready(function (){
$(".container").hover(function(){
$(".c_box").animate({top: "-37px" }, 250);
$(".rectangle").delay(250).animate({right: "50px" }, 250);
$(".text").delay(450).animate({left: "69px" }, 150);
$(".triangle").delay(450).animate({top: "-20px" }, 150);
},
function(){
$(".text").animate({left: "-105px" }, 150);
$(".rectangle").delay(150).animate({right: "280px" }, 150);
$(".c_box").delay(250).animate({top: "-360px" }, 250);
$(".triangle").delay(450).animate({top: "0px" }, 150);
}
);
});$(document).ready(function (){
$(".container").hover(function(){
$(".c_box").animate({top: "-37px" }, 250);
$(".rectangle").delay(250).animate({right: "50px" }, 250);
$(".text").delay(450).animate({left: "69px" }, 150);
$(".triangle").delay(450).animate({top: "-20px" }, 150);
},
function(){
$(".text").animate({left: "-105px" }, 150);
$(".rectangle").delay(150).animate({right: "280px" }, 150);
$(".c_box").delay(250).animate({top: "-360px" }, 250);
$(".triangle").delay(450).animate({top: "0px" }, 150);
}
);
});
The code works fine, however, both the divs with the class 'container' are effected. 该代码可以正常工作,但是,两个具有“容器”类的div均有效。 Ideally i would like to only affect one div at a time (the one the mouse interacts with)
理想情况下,我希望一次只影响一个div(与鼠标交互的一个div)
I'm familiar with the '$(this)' selector. 我熟悉'$(this)'选择器。 Although, I have know idea if it's applicable in this case.
虽然,我知道在这种情况下是否适用。
You should target the .c_box
, .rectangle
, .text
, .triangle
of the current .container
. 你应该针对
.c_box
, .rectangle
, .text
, .triangle
当前的.container
。 The current container can be targeted using $(this)
. 可以使用
$(this)
来定位当前容器。
$(function () {
$('.container').hover(function () {
var $currentContainer = $(this);
var $cBox = $currentContainer.find('.c_box');
var $rectangle = $currentContainer.find('.rectangle');
var $text = $currentContainer.find('.text');
var $triangle = $currentContainer.find('.triangle');
$cBox.animate({ top: '-37px' }, 250);
$rectangle.delay(250).animate({ right: '50px' }, 250);
$text.delay(450).animate({ left: '69px' }, 150);
$triangle.delay(450).animate({ top: '-20px' }, 150);
}, function () {
var $currentContainer = $(this);
var $cBox = $currentContainer.find('.c_box');
var $rectangle = $currentContainer.find('.rectangle');
var $text = $currentContainer.find('.text');
var $triangle = $currentContainer.find('.triangle');
$text.animate({ left: '-150px' }, 150);
$rectangle.delay(150).animate({ right: '280px' }, 150);
$cBox.delay(250).animate({ top: '-360px' }, 250);
$triangle.delay(450).animate({ top: '0' }, 150);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.