JQuery的click事件與同一類

我只是一個使用jQuery初學者多個div。如果點擊事件被觸發，我有一個簡短的JQuery腳本來生成一些淡入淡出效果。一切運作良好，但如果我想使用具有相同類的多個部分，click事件會在兩個部分中觸發效果。所以我想在同一時間只在一個部分觸發點擊事件。這個問題的解決方案是什麼？我應該在每個部分使用多個ID嗎？JQuery的click事件與同一類

$(document).ready(function(){ 
 
     
 
    $(".button").click(function(){ 
 
     $(".big_img").fadeToggle("slow"); 
 
     $(".bottom_header").fadeToggle("slow"); 
 
     $('.small_img').fadeToggle(); 
 
    }); 
 
    
 
    
 
    $('.button').click(function(e) { 
 
     e.preventDefault; 
 
     if ($(".button").hasClass('button_animate')) { 
 
      $('.button').removeClass('button_animate'); 
 
     } else { 
 
      $('.button').removeClass('button_animate'); 
 
      $(".button").addClass('button_animate'); 
 
     } 
 
    }); 
 
    
 
});

.client_container { 
 
    position: relative; 
 
    max-width: 300px; 
 
    height: 373px; 
 
    margin-top: 50px; 
 
    background-color: #00ACC1; 
 
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2); 
 
    } 
 
    
 
.button { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 50px; 
 
    width: 46px; 
 
    height: 46px; 
 
    border-radius: 50%; 
 
    border: none; 
 
    background-color: #00838F; 
 
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2); 
 
    cursor: pointer; 
 
    transition: margin-top .5s ease-in-out; 
 
    } 
 

 
.button_animate { 
 
    margin-top: 228px; 
 
    } 
 
    
 
    .big_img { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    } 
 
    
 
.header{ 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 76px; 
 
    background-color: #0097A7; 
 
    } 
 

 
    p { 
 
     margin: 47px 0 0 15px; 
 
     } 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 73px; 
 
    background-color: #0097A7; 
 
    } 
 
    
 
    p { 
 
     margin: 10px 0 0 12px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="client_container"> 
 
    <div class="header"></div> 
 
    <div class="footer"></div> 
 
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg"> 
 
    <div class="button button_animate"></div> 
 
</div> 
 

 
<div class="client_container"> 
 
    <div class="header"></div> 
 
    <div class="footer"></div> 
 
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg"> 
 
    <div class="button button_animate"></div> 
 
</div>

來源

2016-10-06 gfodor

使用DOM相對於'$瀏覽和選擇（這）'火只有在包含點擊DIV部分的影響。 – Barmar

這個必須在jQuery教程中解釋。我不明白爲什麼我們會得到這麼多問題。 – Barmar

而且必須有一百個傻瓜 – j08691

你的第二個點擊功能可以減少到jQuery toggleclass這個功能可以直接插入第一個事件處理程序。

對於「bottom_header」和「small_img」有一個在你的片段這些類沒有元素，所以我註釋掉這些行。

因此，代碼可以是：

$(".button").click(function(e){ 
      e.preventDefault; 
      $(this).toggleClass('button_animate'); 
      $(this).prev(".big_img").fadeToggle("slow"); 
      //$(".bottom_header").fadeToggle("slow"); 
      //$('.small_img').fadeToggle(); 
    });

要訪問「big_img」我以前jQuery prev。

的片段：

$(document).ready(function(){ 
 
    $(".button").click(function(e){ 
 
    e.preventDefault; 
 
    $(this).toggleClass('button_animate'); 
 
    $(this).prev(".big_img").fadeToggle("slow"); 
 
    //$(".bottom_header").fadeToggle("slow"); 
 
    //$('.small_img').fadeToggle(); 
 
    }); 
 
});

.client_container { 
 
    position: relative; 
 
    max-width: 300px; 
 
    height: 373px; 
 
    margin-top: 50px; 
 
    background-color: #00ACC1; 
 
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2); 
 
} 
 

 
.button { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 50px; 
 
    width: 46px; 
 
    height: 46px; 
 
    border-radius: 50%; 
 
    border: none; 
 
    background-color: #00838F; 
 
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2); 
 
    cursor: pointer; 
 
    transition: margin-top .5s ease-in-out; 
 
} 
 

 
.button_animate { 
 
    margin-top: 228px; 
 
} 
 

 
.big_img { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
.header{ 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 76px; 
 
    background-color: #0097A7; 
 
} 
 

 
p { 
 
    margin: 47px 0 0 15px; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 73px; 
 
    background-color: #0097A7; 
 
} 
 

 
p { 
 
    margin: 10px 0 0 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="client_container"> 
 
    <div class="header"></div> 
 
    <div class="footer"></div> 
 
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg"> 
 
    <div class="button button_animate"></div> 
 
</div> 
 

 
<div class="client_container"> 
 
    <div class="header"></div> 
 
    <div class="footer"></div> 
 
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg"> 
 
    <div class="button button_animate"></div> 
 
</div>

來源

2016-10-06 21:46:31 gaetanoM

-1

這將是有意義的改變第二圖像的類名，簡單複製類，然後添加一個額外的數字或字母，以第二類名

來源

2016-10-06 21:37:19

在jQuery中$(this)指事件處理程序從觸發的元素，所以你可以用它來選擇相對於你點擊使用像.closest()和.find()功能什麼的其他元素。您還可以將兩個單獨的點擊處理函數合併爲一個。

$(document).ready(function() { 
 
    $(".button").click(function(e) { 
 
    e.preventDefault; 
 
    $(this).closest('.client_container').find(".big_img").fadeToggle("slow"); 
 
    $(this).closest('.client_container').find(".bottom_header").fadeToggle("slow"); 
 
    $(this).closest('.client_container').find('.small_img').fadeToggle(); 
 
    if ($(this).hasClass('button_animate')) { 
 
     $(this).removeClass('button_animate'); 
 
    } else { 
 
     $(this).removeClass('button_animate'); 
 
     $(this).addClass('button_animate'); 
 
    } 
 
    }); 
 
});

.client_container { 
 
    position: relative; 
 
    max-width: 300px; 
 
    height: 373px; 
 
    margin-top: 50px; 
 
    background-color: #00ACC1; 
 
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2); 
 
} 
 
.button { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 50px; 
 
    width: 46px; 
 
    height: 46px; 
 
    border-radius: 50%; 
 
    border: none; 
 
    background-color: #00838F; 
 
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2); 
 
    cursor: pointer; 
 
    transition: margin-top .5s ease-in-out; 
 
} 
 
.button_animate { 
 
    margin-top: 228px; 
 
} 
 
.big_img { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.header { 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 76px; 
 
    background-color: #0097A7; 
 
} 
 
p { 
 
    margin: 47px 0 0 15px; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 73px; 
 
    background-color: #0097A7; 
 
} 
 
p { 
 
    margin: 10px 0 0 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="client_container"> 
 
    <div class="header"></div> 
 
    <div class="footer"></div> 
 
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg"> 
 
    <div class="button button_animate"></div> 
 
</div> 
 

 
<div class="client_container"> 
 
    <div class="header"></div> 
 
    <div class="footer"></div> 
 
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg"> 
 
    <div class="button button_animate"></div> 
 
</div>

一定要籤https://learn.jquery.com/

來源

2016-10-06 21:44:14 j08691

非常感謝！ – gfodor

JQuery的click事件與同一類

回答

相關問題