WordPressブログのインデックスページで繰り返しクリックイベントが発生しない

Question

jQueryの新機能は次のとおりです。

これはブログのインデックスページなので、多くの繰り返しクラスがあります。 1つのブログ投稿画像をクリックしてクラスだけを追加して、そのコンテンツだけを表示する方法が必要です。それをするために管理されます。次に、公開されたコンテンツのボタンをクリックして、再び非表示にする必要があります。

私はクリックをアクティブなクラスを削除しようとしましたが、機能しませんでした。私はアクティブなウィンドウを非表示にするボタンを1回だけ得ることができました。基本的にそれは私がそれを望む方法で正確に動作しますが、各ブログ投稿ごとに1回だけです。

//clicking on a service circle makes it active and reveals its content 
$('.service-circle').on('click',function(){ 
    $('.service-circle').removeClass('active'); 
    $(this).addClass('active'); 
}); 

//clicking on the close button hides content of active service circle 
$('.close-button').on('click',function(){ 
    $('.service-circle.active .hidden-content').hide(); 
}); 

テンプレートの設定は便利ですが、ここではあまりにということかどうか分からないのです。ここで

<div class="service-circle"> 
     <div class="hidden-content"> 
      <div class="close-button">X</div> 
       <?php the_content(); ?> 
     </div> 
    </div> 

は、CSSです：

.service-circle { 
width:100%; 
-webkit-border-radius:50%; 
-moz-border-radius:50%; 
border-radius:50%; 
float:left; 
position:relative; 
box-shadow:1px 1px 1px #ccc; 
cursor:pointer !important; 
} 
.service-circle:after { 
content:""; 
display:block; 
padding-bottom:100%; 
} 
.hidden-content { 
display:block; 
width:60%; 
height:60%; 
padding:0; 
position:fixed; 
z-index:9; 
top:-100%; 
left:-100%; 
background:#f3f3f3; 
box-shadow:1px 1px 2px 1px #999; 
transition: all .5s ease-in-out; 
-webkit-transition: all .5s ease-in-out; 
-moz-transition: all .5s ease-in-out; 
-o-transition: all .5s ease-in-out; 
} 
.service-circle.active .hidden-content { 
top:20%; 
left:20%; 
transition: all .5s ease-in-out; 
-webkit-transition: all .5s ease-in-out; 
-moz-transition: all .5s ease-in-out; 
-o-transition: all .5s ease-in-out; 
} 
.close-button { 
width:50px; 
height:50px; 
background:#e86d1f; 
-webkit-border-radius:50%; 
-moz-border-radius:50%; 
border-radius:50%; 
position:absolute; 
top:-25px; 
right:-25px; 
color:#fff; 
font-weight:700; 
line-height:50px; 
font-size:25px; 
cursor:pointer; 
} 

Answer 1

Y関数内でjQuery .each()を使用して、動的に生成された投稿のそれぞれにコードを適用する必要がある場合は、.addClass.removeClassまたは.toggleClassのいずれかを使用できます。 .close-buttonが.service-circleにネストされているので、を追加する必要があります。.activeは1つの機能で削除され、別の機能で追加されています。また、.find()を使用して子要素.close-buttonを検索し、同様に.find()を使用して祖父母.service-circleを検索します。すべてが意味をなさないことを願っています。

$('.service-circle').each(function(){ 
    $(this).on('click' , function(e){ 
     e.stopPropagation(); 
     $(this).addClass('active'); 
    }); 
    $(this).find('.close-button').on('click' ,function(e){ 
     e.stopPropagation(); 
     $(this).parents('.service-circle').removeClass('active'); 
    }); 
}); 

Answer 2

$('.service-circle').on('click',function(){ 
    $(this).addClass('hide'); 
}); 

クラス "隠す" でしょう内容を自動的に非表示にする