这听起来比实际简单得多。 我无法使用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 ></a> <a href="shop.php" class="a2">SHOP ></a> <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 中,您可能希望根据活动类隐藏和显示项目详细信息。