[英]Hide/show cards in bootstrap
我試圖在引導程序中隱藏和顯示幾張卡片,但我無法弄清楚。 所有卡都有 class 卡(當然),我試圖在單擊按鈕時隱藏所有這些卡。 這是我現在擁有的:
function myFunction() {
jQuery(document).ready(function($) {
$(".card").hide();
});
var game = document.getElementById("game").value;
var resolution = document.getElementById("resolution").value;
var graphic = document.getElementById("graphic").value;
if (game == "Black" && graphic == "high" && resolution == "1080") {
alert("Hello " + game + "! You will now be redirected to www.w3Schools.com");
} else if (book == "Red") {
} else if (book == "Green") {
} else {
}
}
對 function 的調用是正確的,因為警報確實可以正常工作。
由於某種原因
jQuery(document).ready(function($) {
$(".card").hide();
});
部分在 js function 之外時工作(當它未連接到按鈕時)。
不知道它是否有幫助,但這里也是我的引導文檔的片段:
<button type="submit" class="btn btn-primary" id="btn" onclick="myFunction()">Submit</button>
</form>
</div>
<!-- Results -->
<div class="card" id="p2" style="width:200px; margin:30px">
<img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
<div class="card-body">
<h5 class="card-title">Processor</h5>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
</div>
</div>
<div class="card" id="p3" style="width:200px; margin:30px">
<img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
<div class="card-body">
<h5 class="card-title">Graphic card</h5>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
</div>
</div>
這是我已經嘗試過的事情:
切換如何通過 css 將鼠標懸停在導航菜單上來隱藏和顯示引導程序 4 卡?
標准 js document.getElementById(".card").style.display = "none";
我看過反應的東西,但我不明白。
我認為如果您想對 DOM 中具有卡 class 的所有元素進行顯示和隱藏切換,您必須這樣做。
var myFunction = function() {
var divsToHide = document.getElementsByClassName("card");
if(divsToHide.length>0){
for(var i = 0; i < divsToHide.length; i++){
if( divsToHide[i].style.display== "none"){
divsToHide[i].style.display = "block";
}else{
divsToHide[i].style.display = "none"; // depending on what you're doing
}
}} }
希望對你有幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.