我试图基于对图像代码的点击来显示和隐藏页面上的元素,如下所示。
jQuery(function($) {
jQuery(".elementor-widget-image").click(function() {
var contentPanelId = jQuery(this).attr("id");
switch (contentPanelId) {
case "capacitacion":
console.log(contentPanelId+' has been clicked');
$( "#capacitacion-content" ).show( "slow");
break;
case "practicas":
console.log(contentPanelId+' has been clicked');
$( "#capacitacion-content" ).hide( "slow");
$( "#bpm-content" ).show( "slow");
break;
}
});
});
问题是,当我按第一个图像时,它可以正常运行,但是第二个图像根本不显示,这是逻辑问题吗?因为我清楚地告诉系统隐藏其中一个并显示另一个。
答案 0 :(得分:0)
替换
$( "#capacitacion-content" ).hide( "slow");
$( "#bpm-content" ).show( "slow");
通过
$("#capacitacionContent" ).hide();
$("#bpmContent" ).show();
然后尝试
答案 1 :(得分:0)
jQuery(function($) {
$("#capacitacion-content").hide();
$("#bpm-content").hide();
jQuery(".elementor-widget-image").click(function() {
var contentPanelId = jQuery(this).attr("id");
switch (contentPanelId) {
case "capacitacion":
console.log(contentPanelId + ' has been clicked');
$("#bpm-content").hide("slow");
$("#capacitacion-content").show("slow");
break;
case "practicas":
console.log(contentPanelId + ' has been clicked');
$("#capacitacion-content").hide("slow");
$("#bpm-content").show("slow");
break;
}
});
});
.elementor-widget-image {
cursor: pointer;
}
#capacitacion-content {
background: red;
height: 100px;
width: 100px;
}
#bpm-content {
background: green;
height: 100px;
width: 100px;
}
#practicas {
margin-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-widget-image" id="capacitacion">Click to test capacitacion </div>
<div class="elementor-widget-image" id="practicas">Click to test practicas</div>
<div id="capacitacion-content"> </div>
<div id="bpm-content"></div>