我有一个包含 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我有一个包含 24 个项目的目录，当单击一个项目时，我想隐藏 23 个项目并显示有关所选项目的更多信息
【发布时间】：2013-03-25 16:38:58
【问题描述】：

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

【问题讨论】：

你能给出一些你到目前为止所做的代码吗？还是一个小小提琴？
有上千种方法可以解决这个问题，因此很难为您指明正确的方向。对于它的价值，AngularJS 有一个相当不错的教程来说明如何做到这一点。
我一开始是类似的，因此我实际上投了赞成票。 SO 用户可能对 Noobs 很苛刻，但一旦你学会用代码或 jsfiddle 提出高质量的问题，事情就会开始好转！
为什么不能修改dom？ ajax 请求获取有关单击项目的数据，将其填充到 dom 中，隐藏其他项目。不是特别难或涉及... JS 不知道并且不在乎它正在处理的 html 是来自数据库还是通过将位刮到硬盘盘片中手动写出来的。
另外，如果它是从数据库中填充的，为什么不能使用 jQuery？您确定只是在前端向用户隐藏它？

标签： php javascript jquery html mysql

【解决方案1】：

在最外层的 div 中使用特殊的 css 类（如“可隐藏”）创建所有列表项。

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

选中一个项目时，使用 jQuery 选择所有具有“可隐藏”类的项目并循环浏览它们，将它们的可见性设置为隐藏。

最后在被点击的项目上将可见性设置为 visible 并且它是“更多数据”div。

【讨论】：

我已经有了。 $(".1001").click(function(){ $("#images1").hide(); $("#images2").show(); });
@ChrisBrennan 您在控制台中看到任何错误或其他内容吗？也许 jquery 没有加载，或者没有选择器试图处理的元素。
没有错误，jquery 加载正常且元素正确。它只是不会隐藏。然而我已经做了无数次了，但是一旦我加入了 PHP，它就不再工作了
影响 jQuery 的肯定不是 PHP .. 他们生活在不同的世界。它适用于纯原始 html 和 jQuery 吗？
@ChrisBrennan 你能发布由 php 生成的 html。也许有什么问题什么的。其他人很清楚原因。

【解决方案2】：

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

您应该能够根据自己的需要进行调整。

【讨论】：

【解决方案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;}

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

【讨论】：

【解决方案4】：

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

【讨论】：

谢谢，这几乎就是我想要的。这段代码只是根据选择的项目过滤了我的目录。我想要的是相似的。我的网站位于scmweb.infj.ulst.ac.uk/~B00448232/COM601/assignment_1/…
你能去它登录然后点击目录中的第一个项目。您会看到生成的页面是我想要为每个项目实现的。作为一个例子，我已经静态地完成了这个，但是如果你得到我，我怎么能得到它，因为如果选择了任何项目（但显然显示它们的图像/细节），这就是结果。
你在这里有很多选择，伙计。您可以删除隐藏和显示以支持基于类的某些 CSS（例如不透明度？），或使用其他 jQuery 效果。如果您有任何具体的想法，请告诉我，我可以尝试为您指明正确的方向。
我没有什么特别的想法，也不真正关心动画或效果。我只是希望隐藏所有项目，除了单击的项目，然后更改页面布局并显示附加信息。您是否登录并查看目录以查看我想要实现的目标？