Javascript 如何使用java脚本显示div

我有一个简单的问题。我需要使用php，它将在页面上生成产品。当用户单击quick look时，它会弹出一个窗口并显示一些产品信息。我只能用两种方法来实现这一点：首先，为每个产品生成一个弹出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">&#163;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，例如，我将生成：

<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信息填充该div。谢谢

实际上，在jQuery中，您可以很容易地使用

toggle（）

函数来更改任何目标元素的可见性：

这使得显示/隐藏与下面的显示一样简单

例如：

$('.buttonQuickLook').click(function(e){
   $('.fixedModalQuickLook').removeClass("display");  // Removing all previous one if somehow still open.
   $(this).closest('li').next('.fixedModalQuickLook').toggleClass("display");
});

.display
{
    display:block;
}

HTML

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

以下是完整的工作示例：

希望有帮助

一些psuedo代码：

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

---

查看您的实时站点。我想这会对你有帮助

我们在这里做什么：

• 首先到达

  按钮的父元素

  。这里的

  li

  是

  .buttonkicklook

  的父项
• 现在查找下一个元素，该元素具有类

  fixedModalQuickLook

• 最后，

  .addClass（'display'）

  将

  display:block

  作为属性（添加到您的CSS）

好了，差不多完成了，现在可以了。但仍然需要一个安全的代码行

• 在执行上述操作之前，我们将关闭所有快速查看模态（这不是必需的，因为您需要关闭prev才能打开下一个）。但是我们仍然会通过

  .addClass（'display'）

：这里我使用了

a

标记作为click Listener。只是一个例子

解决方案如下：

$('.buttonQuickLook').click(function(e){
   $('.fixedModalQuickLook').removeClass("display");  // Removing all previous one if somehow still open.
   $(this).closest('li').next('.fixedModalQuickLook').toggleClass("display");
});

.display
{
    display:block;
}

将此添加到CSS:

$('.buttonQuickLook').click(function(e){
   $('.fixedModalQuickLook').removeClass("display");  // Removing all previous one if somehow still open.
   $(this).closest('li').next('.fixedModalQuickLook').toggleClass("display");
});

.display
{
    display:block;
}

---

发布你的CSS，如果你能用CSS创建一个更好的测试，看看网页上的测试，好的，那么你想什么时候弹出？这是当你点击Quick Look时出现的吗？是的，正如你看到的，我现在有弹出窗口，并且正在工作，但是如果你点击Quick Look上的所有产品，你会看到相同的弹出窗口。在源代码中有大约9个不同的弹出窗口，在浏览了您的live-web后，发布了一个答案。看看它是否对你有帮助，如果有任何疑问，请随意提问。