javascript - 在引导程序中隐藏/显示卡片
问题描述
我试图在引导程序中隐藏和显示几张卡片,但我无法弄清楚。所有卡片都有类卡片(当然),我试图在单击按钮时隐藏所有这些卡片。这是我现在拥有的:
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 {
}
}
该函数的调用是正确的,因为警报确实可以正常工作。
由于某种原因
jQuery(document).ready(function($) {
$(".card").hide();
});
部分在 js 函数之外(当它未连接到按钮时)确实有效。
不知道它是否有帮助,但这里也是我的引导文档的片段:
<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 将鼠标悬停在导航菜单上来隐藏和显示 bootstrap 4 卡?
标准 js document.getElementById(".card").style.display = "none";
我看过反应的东西,但我不明白。
解决方案
我认为如果您想对 DOM 中具有卡片类的所有元素进行显示和隐藏切换,您必须这样做。
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
}
}} }
希望对你有帮助
推荐阅读
- java - 将接口和类引用指向对象之间的区别?
- windows - 如何处理 Windows 的 SSH 配置文件中的空格?
- python - 如何自定义特定熊猫数据框列的函数调用顺序?
- c - 使用结构在 C 中初始化 void qsort() 的参数 4
- plsql - ALL_MVIEWS 的循环游标生成 PL/SQL 错误 ORA-06502
- android-ndk - 当我用 android-ndk 构建 x264 时,它没有完成
- windows - 清除 Visual Studio Code 的 workspaceStorage 文件夹
- docker - 无法连接在不同端口上运行的 Elasticsearch docker 容器
- ios - Ionic 支持:我想使用本机 ios 应用程序库 .a 文件到当前的 ionic 项目。怎么做?
- bash - 如何在 shell 脚本中使用 awk 的位置参数