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

回答

相关问题