您如何使用jquery影響特定元素

Question

（謝謝任何有幫助的人）

我在一個元素的單個實例上使用jQuery懸停方法時遇到麻煩，其類名由多個元素共享

下面我提供了我的代碼：

HTML：

<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>

jQuery的：

$(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);
    }
  );
});

該代碼可以正常工作，但是，兩個具有“容器”類的div均有效。 理想情況下，我希望一次只影響一個div（與鼠標交互的一個div）

我熟悉'$（this）'選擇器。 雖然，我知道在這種情況下是否適用。

Answer 1

你應該針對.c_box ， .rectangle ， .text ， .triangle當前的.container 。 可以使用$(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);
  });
});