jquery問題影響所有元素，而不是一個

我目前正在一個小項目中，我有幾個div元素與img，h1標籤和p標籤。它們每個都有相同的類名稱，我要做的是將一些CSS效果添加到它，以便h1標籤和p標籤滑入框架，並在我將鼠標懸停在它們所包含的div元素上時變爲可見。jquery問題影響所有元素，而不是一個

這裏的問題是，我使用的代碼使所有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>

我知道我想用這個關鍵字是爲了鎖定當前選中的項目，但我只是不知道如何去做，以獲得我想要的效果和我寫的代碼。任何幫助都會非常有幫助。

來源

2017-06-14 Kaley36

我注意到你不（但一次）接受任何答案給你的問題。你想這樣做，其原因是其他用戶可以看到你選擇的是哪一個。這是一種服務於我們所有人的方式，您可以在接受問題時接受答案。 – LGSon

你的腳本應該改變像

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

來源

2017-06-14 10:36:26

謝謝你我工作的朋友 – Kaley36

@ Kaley36，您應該將此答案標記爲「已接受的答案」:) –

只想指定每個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'); 
    }); 
});

來源

2017-06-14 10:34:08 LGSon

您可以使用腳本像

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

來源

2017-06-14 11:26:11

jquery問題影響所有元素，而不是一個

回答

相關問題