ループ内の特定の子を表示/非表示にするJavascript

Question

私はプロジェクトのグリッドを構築していますが、'project'のループをクリックするとdiv 'project_expanded'が表示される必要があります。 'project_expanded' divs。

私はshow/hide機能を使ってjQueryでこれに取り組むことを計画していましたが、親がクリックされたdiv以外の他のすべての'project_expanded' divを非表示にする最良の方法はわかりません。

私は、ループ内の各プロジェクトがitem1、item2、item3などの一意の識別子を必要とする可能性があると考えていますが、リストは潜在的に永遠に続く可能性があるので、Javascriptでこれらをすべて認識する方法はわかりません。

ご協力いただければ幸いです！

<?php while(have_rows('portfolio')): the_row(); 

       // vars 
       $name = get_sub_field('name'); 
       $date = get_sub_field('date'); 
       $kit = get_sub_field('kit_used'); 
       $description = get_sub_field('description'); 
       $link = get_sub_field('video_url'); 
       $image = get_sub_field('image'); 
       $thumb = $image['sizes'][ 'large' ]; 
       ?> 

       <?php 

       if(!empty($name)): 
       ?> 
       <div class="project" style="background-image:url('<?php echo $thumb ?>');"> 
        <div class="project_overlay"> 
         <p class="prj_title"><?php echo $name; ?></p> 
         <p><?php echo $date; ?></p> 
         <p><?php echo $kit; ?></p> 
        </div> 
       </div> 
       <div class="project_expanded"> 
        <h1><?php echo $name; ?> | <?php echo $date; ?></h1> 
        <p class="red_text"><?php echo $kit; ?></p> 
        <div data-type="youtube" data-video-id="<?php echo $link; ?>"></div> 
       </div> 
       <?php endif; ?> 

      <?php endwhile; ?> 

Answer 1

$(document).ready(function(){ 
 
    $('.project_expanded').hide(); 
 
    
 
    $(".project").click(function(){ 
 
    $('.project_expanded').hide(); 
 
    $(this).next('.project_expanded').show(); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project" style=""> 
 
    <div class="project_overlay"> 
 
     <p class="prj_title">pr1</p> 
 
     <p>DATE</p> 
 
     <p>KIT</p> 
 
    </div> 
 
</div> 
 
<div class="project_expanded"> 
 
    <h1>NAMEW | DATE</h1> 
 
    <p class="red_text">KIT</p> 
 
    <div data-type="youtube" data-video-id="LINK"></div> 
 
</div> 
 

 
<div class="project" style=""> 
 
    <div class="project_overlay"> 
 
     <p class="prj_title">pr2</p> 
 
     <p>DATE1</p> 
 
     <p>KIT1</p> 
 
    </div> 
 
</div> 
 
<div class="project_expanded"> 
 
    <h1>NAME2 | DATE2</h1> 
 
    <p class="red_text">KIT</p> 
 
    <div data-type="youtube" data-video-id="LINK"></div> 
 
</div>

希望これは、彼らにすべて同じクラス名を与えるので、 "クラス=" 拡張red_text」＆クラス= "" 'prj_title拡張し、使用することによって開始

Answer 2

'hiding all except one' -problemsは1を示し、その後、すべて非表示にすることで解決することができます。
どれが表示されるべきかを知るには、onclickメソッドのパラメータとしてthis（クリックされた要素）を渡すことによって行うことができます。 jsの中

<div class="project" onclick="showProjectExpanded(this)">...</div> 

はあなたが（あなたのケースでproject_expandedクラスとその兄弟）を非表示にする要素を検索することができる機能、すべての.project_expandedのdivおよびshow選択のdivを非表示にします。

function showProjectExpanded(project){ 
    var projectDiv = $.(project); // not sure here, havent used jQuery for a long time ;) 
    var divToShow = projectDiv.next(); 

    // hide all project_expanded divs 
    $.('.project_expanded').hide(); 

    // show single project_expanded div 
    divToShow.show(); 
}