Jquery会影响所有元素，而不仅仅是一个元素。

Question

我目前正在做一个小项目，在这个项目中，我有几个带有img、h1标记和p标记的div元素。它们都有相同的类名，我想要做的是在其中放置一些css效果，以便h1标记和p标记滑到框架中，当我悬停在包含它们的div元素上时，它们就变得可见了。

这里的问题是，当我只希望当前悬停的div元素具有此效果时，我使用的代码会对所有div元素产生效果。

这是我的代码：

css

<style>
    .col-md-4 {
        margin-top: 30px;
        margin-bottom: 26px;
        color: white;


    }



    .title-1 {
        margin-top: -260px;
        text-align: center;
        position: relative;
        top: -104px;
        opacity: 0;
        transition: top 1s, opacity 1s;


    }

    .paragraph-1 {
        margin-top: 160px;
        text-align: center;
        position: relative;
        top: 60px;
        opacity: 0;
        transition: top 1s, opacity 1s;

    }

    .title-2 {
        margin-top: -260px;
        text-align: center;
        position: relative;
        top: -20px;
        opacity: 1;
        transition: top 1s, opacity 1s;
    }

    .paragraph-2 {
        margin-top: 160px;
        text-align: center;
        position: relative;
        top: -20px;
        opacity: 1;
         transition: top 1s, opacity 1s;
    }

以下是jquery代码

<script>
    $('document').ready(function() {
        $('.col-md-4').mouseover(function() {
            $('h1').addClass('title-2');
            $('h1').removeClass('title-1');
            $('p').addClass('paragraph-2');
            $('p').removeClass('paragraph-1');

        });

        $('.col-md-4').mouseleave(function() {
            $('h1').addClass('title-1');
            $('h1').removeClass('title-2');
            $('p').addClass('paragraph-1');
            $('p').removeClass('paragraph-2');
        });
    });



</script>

下面是html的样子

 <div class="col-md-4">
                <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>

            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

            <div class="col-md-4">
                <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>

            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

             <div class="col-md-4">
                 <img src="images/remodeling3.jpg" class="img">
                 <h1 class="title-1">Title Here</h1>
                <p class="paragraph-1">Paragraph here.</p>
            </div>

我知道我想使用这个关键字来针对当前选择的项目，但是我不知道如何用我编写的代码来获得我想要的效果。任何帮助都是非常有帮助的。

Answer 1

您的脚本应该更改为

<script>
    $('document').ready(function() {
        $('.col-md-4').mouseover(function() {

        $(this).find('h1').addClass('title-2');
            $(this).find('h1').removeClass('title-1');
            $(this).find('p').addClass('paragraph-2');
           $(this).find('p').removeClass('paragraph-1');

        });

        $('.col-md-4').mouseleave(function() {
            $(this).find('h1').addClass('title-1');
            $(this).find('h1').removeClass('title-2');
            $(this).find('p').addClass('paragraph-1');
           $(this).find('p').removeClass('paragraph-2');
        });
    });



</script>

Answer 2

要只针对每个col-md-4元素中的子元素，可以使用this和find()，如下所示

$( this ).find('element').addClass('class');

通过将removeClass/addClass组合起来，可以使代码更高效。

$('document').ready(function() {
    $('.col-md-4').mouseover(function() {
        $( this ).find('h1').removeClass('title-1').addClass('title-2');
        $( this ).find('p').removeClass('paragraph-1').addClass('paragraph-2');
    });

    $('.col-md-4').mouseleave(function() {
        $( this ).find('h1').removeClass('title-2').addClass('title-1');
        $( this ).find('p').removeClass('paragraph-2').addClass('paragraph-1');
    });
});

另一种选择是使用toggleClass，可以一次性删除和添加类。但是请注意，如果要删除的类一开始没有设置在元素上，那么这两个类要么关闭要么打开。

$('document').ready(function() {
    $('.col-md-4').mouseover(function() {
        $( this ).find('h1').toggleClass('title-1 title-2');
        $( this ).find('p').toggleClass('paragraph-1 paragraph-2');
    });

    $('.col-md-4').mouseleave(function() {
        $( this ).find('h1').toggleClass('title-2 title-1');
        $( this ).find('p').toggleClass('paragraph-2 paragraph-1');
    });
});

Answer 3

您可以使用脚本，例如

/**
 * Execute Method when DOM ready
 * @return {[type]}   [description]
 */
$('document').ready(function() {
  // mouse over script
  $('.col-md-4').mouseover(function() {
    // collect $(this) object in local var as $this
    var $this = $(this);
    // find <H1> tag inside .col-md-4 current container, where event happening
    $this.find('h1')
      // first add desire class
      .addClass('title-2')
      // now remove class by using jQuery Channing Method WOAH!!
      .removeClass('title-1');
    // same for <P> tag as done before for <H1>
    $this.find('p').addClass('paragraph-2').removeClass('paragraph-1');

  });

  // mouse leave script
  $('.col-md-4').mouseleave(function() {
    // collect $(this) object in local var as $this
    var $this = $(this);
    // find <H1> tag inside .col-md-4 current container, where event happening
    $this.find('h1')
      // first add desire class
      .addClass('title-1')
      // now remove class by using jQuery Channing Method WOAH!!
      .removeClass('title-2');
    // same for <P> tag as done before for <H1>
    $this.find('p').addClass('paragraph-1').removeClass('paragraph-2');
  });
});

LIVE DEMO