如何用java脚本显示div

Question

我有一个简单的问题。我需要使用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">&#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：

$(".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> 

以及我如何modifiy我的JavaScript来检测一下我点击展示，或者我怎样才能使一个SINGL e div并填写我的PHP信息。谢谢 ！

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

Answer 2

它实际上是很简单的jQuery的，你可以很容易地使用toggle()函数来真正地改变任何目标元素的可见性：

这使得显示/隐藏很容易为下面的表演。

例如：

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> 

JS

$(".close-quick-look, button").on("click", function() { 

    $(".quickModalCover").toggle(); 
    $(".fixedModalQuickLook").toggle() 

}) 

以下是完整的工作示例：http://jsbin.com/babupucoku/edit?html,js,output

希望有所帮助！

Answer 3

一些伪代码：

<? 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(); 
}