我有一个简单的问题。我需要使用php来生成页面上的产品。当用户点击快速查看时，它应弹出一个窗口并显示一些产品信息。我只能这样做两种方式：首先，为每个产品生成一个弹出div。其次，只生成一个基本弹出窗口并从产品中填写数据。现在我有第二个版本：
这是div：
<div class="fixedModalQuickLook">
<a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
<div class="innerModalQuickLook">
<div class="shortInfoItemInfo visible-xs col-xs-12">
<h2><a href="#" title=""> do</a></h2>
</div>
<div class="containerImg-Social col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="imgWishListItem ">
<a href="#" title="">
<img src="images/gallery/carti2.jpg" class="img-responsive" />
</a>
</div>
<div class="shareItem ">
<ul>
<li><a href="#" title=""><i class="fa fa-facebook"></i></a> </li>
<li><a href="#" title=""><i class="fa fa-google-plus"></i></a> </li>
<li><a href="#" title=""><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
<div class="shortInfoItemInfo col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="buttonCartWishList visible-xs"> <a href="javascript:void(0)" class="addToCartButtonWL"><input type="text" placeholder="1" name="count" /> Add to cart</a></div>
<h2 class="hidden-xs"><a href="#" title=""> Hiroshige: One Hundred Famous Views of Edo</a></h2>
<div class="stars"><img src="images/icon/stars-small.png" alt=" " title="" /> </div>
<div class="priceQuikLookItem">£30.88</div>
<div class="buttonCartWishList hidden-xs">
<a href="javascript:void(0)" class="addToCartButtonWL">
<form class="wrapInput"> <input type="text" placeholder="1" size="1" id="count" onkeypress="this.style.width = ((this.value.length + 12) * 6) + 'px';" /> </form><!--</div>--> Add to cart
</a>
</div> <!--onkeypress="this.style.width = ((this.value.length + 12) * 9) + 'px';" -->
</div>
<div class="stocInfo col-lg-2 col-md-2 col-sm-6 col-xs-12">
<h5>disponibility</h5>
<div class="stocNumber"> Stoc:<span>100</span> </div>
<div class="multipleOptions">
<div class="showInfo">
<div class="color cyan"></div>
<div class="color azure"></div>
<div class="color skyBlue"></div> <i class="fa fa-plus"></i>
</div>
<div class="showPlusInfo">
<h6>Colors</h6>
<div class="color cyan"></div>
<div class="color azure"></div>
<div class="color skyBlue"></div>
<div class="color phthaloBlue"></div>
<div class="color sapphire"></div>
<div class="color gold"></div>
<div class="color chartreuse"></div>
<div class="color jasmine"></div>
<div class="color apricot"></div>
<div class="color gold"></div>
<div class="color chartreuse"></div>
<div class="color azure"></div>
<div class="color skyBlue"></div>
<div class="color phthaloBlue"></div>
<div class="color jasmine"></div>
<div class="color apricot"></div>
<div class="color phthaloBlue"></div>
<div class="color sapphire"></div>
<div class="color gold"></div>
<div class="color chartreuse"></div>
<div class="color jasmine"></div>
<div class="color apricot"></div>
<div class="color gold"></div>
<div class="color chartreuse"></div>
<div class="color jasmine"></div>
<div class="color apricot"></div>
</div>
</div>
<div class="multipleOptions">
<div class="showInfo">shipping<i class="fa fa-plus"></i> </div>
<div class="showPlusInfo">
<h6>Shipping</h6>
<p>Sed ut perspiciatis unde omnis</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
</div>
</div>
</div>
<div class="moreInfo col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h5>Short Info</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="listInfoItem">
<ul>
<li><strong>Gama:</strong> PowerSeeker<br></li>
<li><strong>Design optic:</strong> Refractor<br></li>
<li><strong>Nivel:</strong> Incepatori/Copii<br></li>
<li><strong>Tip obiectiv:</strong> Acromat<br></li>
<li><strong>Computerizat:</strong> Nu<br></li>
</ul>
<ul>
<li><strong>Magnitudine stelara maxima:</strong> 11.1<br></li>
<li><strong>Marire teoretica maxima:</strong> 120x<br></li>
<li><strong>Diametru (inch):</strong> 50 mm<br></li>
<li><strong>Montura:</strong> Altazimutala<br></li>
<li><strong>Distanta focala:</strong> 600 mm<br></li>
</ul>
</div>
</div>
</div>
</div>
有了这个，我展示了div：
$(".close-quick-look").on("click", function () {
$(".quickModalCover").css('display', 'none');
$(".fixedModalQuickLook").css('display', 'none');
});
$(".buttonQuickLook").on("click", function () {
$(".quickModalCover").css('display', 'block');
$(".fixedModalQuickLook").css('display', 'block');
$(".fixedModalQuickLook").css('opacity', '1');
});
我不知道如何显示特定的div，例如我将生成：
<div class="fixedModalQuickLook17">
<a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
<div class="innerModalQuickLook17"></div>
</div>
<div class="fixedModalQuickLook30">
<a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
<div class="innerModalQuickLook30"></div>
</div>
<div class="fixedModalQuickLook556">
<a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
<div class="innerModalQuickLook556"></div>
</div>
我如何修改我的javascript以检测我点击显示的内容，或者我如何制作一个div并用我的php信息填充它。谢谢！
答案 0 :(得分：1)
查看您的直播网站。我认为这会对你有帮助。
我们在这做什么：
button的父元素。此处li是.buttonQuickLook的父级。fixedModalQuickLook的下一个元素。.addClass('display')作为属性的display:block。 （添加到您的CSS） 好的差不多完成了，现在这样可行。但仍然需要一个安全的双面代码行。
.addClass('display') Demo：我在这里使用了a标签作为点击监听器。只是一个例子。
以下是解决方案：
$('.buttonQuickLook').click(function(e){
$('.fixedModalQuickLook').removeClass("display"); // Removing all previous one if somehow still open.
$(this).closest('li').next('.fixedModalQuickLook').toggleClass("display");
});
将此添加到您的CSS：
.display
{
display:block;
}
答案 1 :(得分：0)
实际上，在jQuery中，您可以轻松地使用<div class="fixedModalQuickLook">
<a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
<div class="innerModalQuickLook">
<div class="shortInfoItemInfo visible-xs col-xs-12">
<h2><a href="#" title=""> do</a></h2>
</div>
</div>
</div>
<button>Quick Look</button>
函数来逐字地更改任何目标元素的可见性：
这使得show / hide非常容易，如下图所示。
例如：
<强> HTML
$(".close-quick-look, button").on("click", function() {
$(".quickModalCover").toggle();
$(".fixedModalQuickLook").toggle()
})
<强> JS
{{1}}
以下是完整的工作示例：http://jsbin.com/babupucoku/edit?html,js,output
希望有所帮助！
答案 2 :(得分：0)
一些伪代码：
<? foreach($products as $product):?>
<div id ="product_<?=$product->id;?>" onclick="display('product_<?=$product_id;?>'); return false;">
<div id="header">
Viewing information for <?=$product->name;?>
</div>
</div>
<? endforeach;?>
jquery的：
function hide()
{
$('[id^=product_]').hide();
}
$(document).ready(function() {
hide();
});
//displays div passed in
function display(div_id)
{
hide();
$('#'+div_id).fadeIn();
}