同じクラスの複数のdivを持つJQueryのクリックイベント

Question

JQueryの初心者です。私は、クリックイベントが発生した場合、いくつかのフェード効果を生成する短いJQueryスクリプトを用意しています。すべてがうまくいきますが、同じクラスで複数のセクションを使用したい場合、clickイベントは両方のセクションでエフェクトを発生させます。だから私は同じ時間に1つのセクションでクリックイベントを発生させたい。 この問題の解決方法を教えてください。各セクションに複数のIDを使用する必要がありますか？

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

Answer 1

あなたの第2のクリック機能をチェックアウトしてください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>

Answer 2

それは は、単にjQueryのでは、第二クラス名に

Answer 3

を余分な数字または文字を追加したクラスをコピーし、第2の画像のクラス名を変更するには理にかなって$(this)は、あなたのイベントハンドラがトリガされた要素を参照するので、.closest()と.find()のような関数を使用してクリックしたものに関連する他の要素を選択するために使用できます。 2つの別々のクリックハンドラ関数を1つに結合することもできます。

$(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/