如何用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(); 
}