php生成的項目的圖像覆蓋

所以我有我的模擬商店的滾動效果，每個框的圖像和信息都取自.sql文件和自動生成的部分。我希望它也覆蓋每個部分。我可以硬編碼它，但那太過嚴厲了。php生成的項目的圖像覆蓋

<div id="scoll" class="group"> 
       <div class="container"> 
        <div class="center_items"> 


       <?php 
     //external pages area 
     include_once('config\database.php'); 
     include_once('object/chair.php'); 
     $database = new Database(); 
     $conn = $database->getConnection(); 
     $chair = new Chair($conn); 
     $stmt = $chair->readAll(); 
     while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ 
      ?> 

      <div class="product_box" > 


      <img src="img/<?php echo $row['THUMB']; ?>" alt="chair_image"> </a> 
      <h4><a href="movies-details.php?detailsid=<?php echo $row['ID'];?>"> <?php echo $row['chair_name'];?></a> </h4> 
      <p>$<?php echo $row['PRICE'];?></p> 
      <div class="buy-box-shadow group"> 
      <a href="chair-details.php?detailsid=<?php echo $row['ID'];?>" class="btn">Buy me!</a> 
      </div> 

     </div> 
     <?php 
     } 
     ?> 


        </div> 
       </div>    
      </div> 


JS 

    onload=init; 

    function init() { 
    document.getElementsByClassName("product_box")[0].onmouseover = function(e){ 
      e.preventDefault(); 
      mouseOver(); 
     } 
    document.getElementsByClassName("product_box")[0].onmouseout = function(e){ 
      e.preventDefault(); 
      mouseOut(); 
     } 

    function mouseOver() { 
     document.getElementsByClassName("buy-box-shadow")[0].style.opacity = .9; 
    } 

    function mouseOut() { 
     document.getElementsByClassName("buy-box-shadow")[0].style.opacity = 0; 
    }

看到代碼被硬編碼爲第一個元素，有點困惑如何讓它去爲每個元素。

來源

2015-08-28 Hot Java

你不需要JavaScript就可以做到這一點，你可以只使用CSS。

.product_box .buy-box-shadow { 
    opacity: 0.9; 
    display: none; 
} 
.product_box:hover .buy-box-shadow { 
    display: block; 
}

來源

2015-08-28 23:30:23

應該可以用forEach做到這一點。像這樣：

function init() { 
var product_boxes = document.getElementsByClassName("product_box"); 
product_boxes.forEach(function(currentValue, index, array){ 
    currentValue.onmouseover = function(e){ 
     e.preventDefault(); 
     mouseOver(); 
    } 
});

來源

2015-08-28 23:19:45

嗯這很有趣我在前面學習了一些關於foreach循環的知識，所以對於shadow box我怎麼寫呢？我試過模仿第一個例子，但它不起作用。我寫它作爲函數mouseOver（）{ shadow_boxes.style.opacity = .9; } –

嗯......我明白了。爲什麼我們要把它分解成像這樣的多個函數？或者說，你爲什麼要在你從mouseover和mouseout中調用的函數中調用getElementByClassName？我會嘗試將currentValue傳遞給該函數，然後使用.style.opacity屬性從那裏設置不透明度。您已經擁有DOM對象，您應該可以使用返回到原始數組的內容更改其屬性。也許是這樣的：function mouseOver（e）{e.style.opacity = 9;}'只要將currentValue傳遞給mouseOver函數即可。 –

php生成的項目的圖像覆蓋

回答

相關問題