php - 我有一个包含 24 个项目的目录，当单击一个项目时，我想隐藏 23 个项目并显示有关所选项目的更多信息

Question

这听起来比实际简单得多。我无法使用 jQuery 修改 DOM，因为每个项目及其详细信息都是使用 PHP 从数据库中填充的。

理论上我想做的事情很简单，但我做不到。例如我想要的是：

如果单击项目 1001，则隐藏所有其他项目并显示有关项目 1001 的更多详细信息。

这是我第二次在这个问题上寻求帮助，似乎没有人知道这个问题的答案。我已经改写了我的问题并再次尝试，并且非常感谢您的帮助。即使你能指出我正确的方向，我也会去研究它。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 中使用特殊的 css 类（如“可隐藏”）创建所有列表项。

加载所有项目，并将“更多详细信息”数据包含在具有样式属性的单独 div 中'visibility: hidden'。

检查一个项目后，使用jQuery选择所有具有“可隐藏”类的项目，然后循环通过它们，将其视为隐藏。

最后将可见性设置为在单击的项目上可见，它是“更多数据”div 。

Answer 3

基本前提是，您将隐藏除单击的所有项目之外的所有项目，您还将显示单击的更多信息。您可以使用基本的显示/隐藏 jQuery 功能来做到这一点。

加载更多信息 div 并将其显示设置为无，然后在单击特定项目时切换它们。

这里非常基本，非常丑陋的版本：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>

您应该能够调整它以满足您的需求。

Answer 4

很难在没有看到任何代码的情况下回答......但有点像这样的事情可能会奏效。

...大致上，标记...

<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;}

可能需要针对标记的排列方式对其进行微调，但您明白了。