Javascript，CSS - 模式id while循環唯一ID

嘿，我有以下代碼，它完美的工作，但我也想在每個循環內使用相同的概念。這不會工作，因爲沒有唯一的標識符。我該如何解決這個問題？下面是我的代碼（與每個循環）Javascript，CSS - 模式id while循環唯一ID

.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 250px; /* Location of the box */ 
    left: 680; 
    top: 0; 
    width: 35%; /* Full width */ 
} 

.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
    min-height: 250; 
} 

.close { 
    color: #aaaaaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 
.close :hover, 
.close :focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
}

然後，我有一些PHP代碼

foreach ($myarray as $my_array) { 

         Select table etc 


echo " <div class='col-sm-4 hides'> <button style='background-color: Transparent; border: none; padding: 0px 0px;' color='white' onclick=\"selected_comp('" . $received1['id'] . "','" . $comp_row['id'] . "','" . $comp_row['functions'] . "','" . preg_replace("/\r|\n/", "", $comp_row['comments']) . "')\"> <b>" . $comp_row['functions'] . "</b><br>"; 



echo "</button>"; 
if (strlen($comp_row['comments']) > 100){ 
echo " 
<a href='javascript:void(0);' id='showall3'>Volledige beschrijving. </a> 
    <div id='myModal3' class='modal'> 
    <div class='modal-content'> 
     <span id='close3' class='close'>×</span> 
     <p> 
     <b> " . $comp_row['functions'] . " </b><br> 
     " . nl2br($comp_row['comments']). " 
     </p> 
     </div> 
    </div> 
    ";  
}

，我得到了一些JavaScript代碼來顯示模式（和隱藏）

var modal3 = document.getElementById('myModal3') ; 
$('#close3').click(function(){ 
    modal3.style.display = 'none'; 
}); 
$('#showall3').click(function(){ 
    modal3.style.display = 'block'; 
});

來源

2016-09-27 Wouter

你知道什麼是班嗎？ – madalinivascu

是的，但不起作用...相同principel適用。當定義一個類時，它仍然不知道要顯示的模式中的哪些內容 – Wouter

將ID更改爲類，使用closest()next()，使用show/hide切換d，獲取模態體選擇相對於單擊元素的元素isplay property

echo " 
<a href='javascript:void(0);' class='showAll'>Volledige beschrijving. </a> 
    <div class='modal myModal'> 
    <div class='modal-content'> 
     <span class='close'>×</span> 
     <p> 
     <b> " . $comp_row['functions'] . " </b><br> 
     " . nl2br($comp_row['comments']). " 
     </p> 
     </div> 
    </div> 
    "; 

$('.close').click(function(){ 
    $(this).closest('.myModal').hide(); 
}); 
$('.showAll').click(function(){ 
    $(this).next().show(); 
});

來源

2016-09-27 09:18:26 madalinivascu

謝謝像一個魅力 – Wouter

Javascript，CSS - 模式id while循環唯一ID

回答

相關問題