php - 24 アイテムのカタログがあり、1 つのアイテムがクリックされると、23 アイテムを非表示にして、選択したアイテムの詳細情報を表示したい

Question

これは実際よりもはるかに単純に聞こえます。各項目とその詳細は PHP を使用してデータベースから入力されるため、jQuery を使用して DOM を修正することはできません。

私が理論的にやりたいことはとても簡単ですが、それを達成することはできません。たとえば、私が欲しいのは次のとおりです。

アイテム 1001 をクリックすると、他のすべてのアイテムが非表示になり、アイテム 1001 に関する詳細情報が表示されます。

この件で私が助けを求めたのはこれが 2 回目ですが、誰もこの問題に対する答えを持っていないようです。私は自分の質問を言い換えて、もう一度やり直しています。本当に助けていただければ幸いです。たとえあなたが私を正しい方向に向けることができたとしても、私はそれを調査します. TBH どこから始めたらいいのかまったくわかりません。

ありがとう

<script>
        $(".1001").click(function(){
            $("#images1").remove();
            $("#images2").show();
        });
     </script>


     <section class="catalogListing">
     <?php $load_content->load_content("1001");?>
      <div class="dresses">
       <a class="1001" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?><br />Was:<strike>£175.00</strike></p>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>  
      </div>
     </section>

     <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1002");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?><br />Was:<strike>£150.00</strike></p>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
       <p class="p4"><font>Out of stock</font></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1003");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?><br />Was:<strike>£150.00</strike></p>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
       <p class="p4"><font>Out of stock</font></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1004");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>

     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1005");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?><br />Was:<strike>£150.00</strike></p>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1006");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1007");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1008");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
       <p class="p4"><font>Out of stock</font></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1009");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    </section><!---End of first nine items--->

    <section id="secondNineItems">

   <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1010");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1011");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1012");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1013");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>


    <!---Items with the class "tunics" are below--->

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1014");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1015");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>


    <!---Items with the class "tops" are below--->

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1016");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
      <p class="p4"><font>Out of stock</font></p> 
     </div>
    </section>          

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1017");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1018");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
      <p class="p4"><font>Out of stock</font></p> 
     </div>
    </section>

    </section><!---End of second nine items--->

    <section id="thirdNineItems">

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1019");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1020");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1021");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1022");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1023");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p>
     </div>
    </section>

    <section class="catalogListing">
      <div class="dresses">
      <?php $load_content->load_content("1024");?>
       <a class="a3" href="#">
       <figure><img src="<?php echo $load_content->getImgMedium();?>" /></figure>
       <p class="listing"><?php echo $load_content->getTitle();?></p></a>
       <p class="listingSub">Artist:<?php echo $load_content->getArtist();?>
       <p class="p4"><strong>Now: £<span class="price"><?php echo $load_content->getPrice();?></span></strong></p> 
      <p class="p4"><font>Out of stock</font></p> 
     </div>
    </section>

    </section><!---End of third nine items--->

    </article><!---End of article:ShopContent--->

   </article><!---End of article:ShopWrapper--->


  </article><!---End of article:main--->

  <!---Main Content Area clothes--->

  <article id="clothes1">



    <p class="p2"><a href="index.php" class="a2">HOME&nbsp;></a>&nbsp;<a href="shop.php" class="a2">SHOP&nbsp;></a>&nbsp;<strong>CLOTHES 1</strong></p>

    <!--- Load images --->
    <section id="images1" style="width:400px; float:left; height:auto;">

    <p><?php $load_content->load_content('1002');?></p>

     <a href="<?php echo $load_content->getImgLarge1();?>" class="zoom">
     <img src="<?php echo $load_content->getImgLarge1();?>" width="375" height="568" alt="arrows"></a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall1();?>" width="64" height="100"/>
     </a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall2();?>" width="64" height="100"/>
     </a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall3();?>" width="64" height="100"/>
     </a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall4();?>" width="64" height="100"/>
     </a>     

    </section>

    <!--- Load images --->
    <section id="images2" style="width:400px; float:left; height:auto;">

    <p><?php $load_content->load_content('1001');?></p>

     <a href="<?php echo $load_content->getImgLarge1();?>" class="zoom">
     <img src="<?php echo $load_content->getImgLarge1();?>" width="375" height="568" alt="arrows"></a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall1();?>" width="64" height="100"/>
     </a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall2();?>" width="64" height="100"/>
     </a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall3();?>" width="64" height="100"/>
     </a>

     <a href="#">
     <img class="thumbnails" title="Click to enlarge" src="<?php echo $load_content->getImgSmall4();?>" width="64" height="100"/>
     </a>     

    </section>

PHP で生成された HTML コード:

<section id="images2" style="width:400px; float:left; height:auto;">

<p></p>

 <a href="images/Catalog/Largest/aof_14102_amorous_arrows.jpg" class="zoom">
 <img src="images/Catalog/Largest/aof_14102_amorous_arrows.jpg" width="375" height="568" alt="arrows"></a>

 <a href="#">
 <img class="thumbnails" title="Click to enlarge" src="images/Catalog/Small/aof_14102_amorous_arrows.jpg" width="64" height="100">
 </a>

 <a href="#">
 <img class="thumbnails" title="Click to enlarge" src="images/Catalog/Small/aof_14175_amorous_arrows_side_back_view.jpg" width="64" height="100">
 </a>

 <a href="#">
 <img class="thumbnails" title="Click to enlarge" src="images/Catalog/Small/aof_14077_amorous_arrows_other_view.jpg" width="64" height="100">
 </a>

 <a href="#">
 <img class="thumbnails" title="Click to enlarge" src="images/Catalog/Small/amorous_arrows.jpg" width="64" height="100">
 </a>     

</section>

Answer 1

var $all_listings = $('section.catalogListing');    

$('section.catalogListing').click(function(){

    var $listing = $(this);

    if(!$listing.hasClass('active') {
        $all_listings.removeClass('active').hide();
        $listing.addClass('active').show();
    } else {
     $all_listings.show();
     $listing.removeClass('active');
    }

});

それはあなたにとってどのように機能しますか？

説明：

「オン」または「オフ」に応じて、アクティブなクラスを追加または削除します。アクティブなリストのみを表示しますが、既にアクティブなリストをクリックした場合は、アクティブなクラスを削除してすべてを表示します....基本的に振り出しに戻ります。

最上位の親 (この場合はセクション) でアクティブ クラスを使用しますが、CSS では、アクティブ クラスに応じてアイテムの詳細を表示または非表示にすることができます。

Answer 2

最も外側の div に「hideable」などの特別な css クラスを含むすべてのリスト項目を作成します。

すべてのアイテムをロードし、「詳細」データをスタイル プロパティを持つ別の div に含めます'visibility: hidden'。

1 つのアイテムがチェックされたら、jQuery を使用して、クラスが 'hideable' であるすべてのアイテムを選択し、それらを循環させて、それらの可視性をhiddenに設定します。

最後に、クリックされたアイテムの可視性を可視に設定し、それは「詳細データ」div です。

Answer 3

あなたのコードを見ずに答えるのはかなり難しいです...しかし、このような何かがうまくいくかもしれません。

...大まかに、マークアップ...

<a href="#" class='view-details-btn' data-product='product1001'>View Details</a>
<div class='item-container' data-product='product1001'>
 <!-- stuff goes in here -->
</div>

...そしてjs...

function details(switch,clicked){

    var objects = $('.item-container'),
        objectToShow = $('.item-container[data-product=' + $(clicked).attr('data-product') + ']'),
        objectsToHide = $(objects).not(objectToShow);

    if (switch === 'show'){
        $(objectsToHide).hide();
        $(objectToShow).addClass('show-details');
    } else {
        $(objects).removeClass('show-details').show();
    }   
}

$('a.view-details-btn').click(function(e){
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    details('show',$(this));
});

$('a.hide-details-btn')..click(function(e){
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    details('hide');
});

...そしてcss...

.item-container .detailbox {display: none;}
.item-container.show-details .detailbox {display: block;}

マークアップを具体的にどのように配置するかについては、おそらくその一部を微調整する必要がありますが、アイデアはわかります。

Answer 4

基本的な前提はこれです。すべてのアイテムを非表示にしますが、クリックしたアイテムについては、クリックしたアイテムの詳細情報も表示します。これは、基本的な表示/非表示の jQuery 機能で行うことができます。

詳細情報 div を読み込み、その表示を none に設定してから、特定の項目がクリックされたときにそれらを切り替えます。

ここの非常に基本的な、非常に醜いバージョン: http://jsfiddle.net/calder12/zf5ZT/

$('div').on("click", function(){
    if($(this).hasClass('smallDiv'))
    {
       $('div').not(this).fadeOut();
       $(this).addClass('bigDiv'); 
       $(this).removeClass('smallDiv'); 
        $('.info').fadeIn();
    } else {        
       $('div').not(this).fadeIn();
       $(this).addClass('smallDiv'); 
       $(this).removeClass('bigDiv');  
        $('.info').fadeOut();
    }
});



.smallDiv{width:50px;height:50px;background-color:#CCC;border:1px solid #333;margin: 10px;cursor:pointer;}
.bigDiv{width:100px;height:100px;background-color:#CCC;border:1px solid #333;margin: 10px;cursor:pointer;}
.info{display:none;}


<div id="1" class="smallDiv"><div class="info">This is some text</div></div>
<div id="2" class="smallDiv"></div>
<div id="3" class="smallDiv"></div>
<div id="4" class="smallDiv"></div>

ニーズに合わせてこれを調整できるはずです。