我有一个包含 24 个项目的目录，当单击一个项目时，我想隐藏 23 个项目并显示有关所选项目的更多信息 - I have a catalog of 24 items, when one item is clicked, I want to hide 23 items and show more information on the selected item

这听起来比实际简单得多。我无法使用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>

使用特殊的 css 类(如"隐藏"(在其最外层的div 中创建所有列表项。

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

选中一个项目后，使用 jQuery 选择所有具有类"可隐藏"的项目，并在它们之间循环，将其可见性设置为隐藏。

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

基本前提是，您将隐藏所有项目，但单击的项目除外，您还将显示单击的项的更多信息。您可以使用基本的显示/隐藏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>

您应该能够调整此设置以满足您的需求。

如果不看到您的任何代码，很难回答...但是像这样的东西可能会起作用。

。粗略地说，标记...

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

可能需要微调其中的一些，特别是你的标记是如何排列的，但你明白了。

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 中，您可能希望根据活动类隐藏和显示项目详细信息。