Question

我试图基于对图像代码的点击来显示和隐藏页面上的元素，如下所示。


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;
            }

    });

});

问题是，当我按第一个图像时，它可以正常运行，但是第二个图像根本不显示，这是逻辑问题吗？因为我清楚地告诉系统隐藏其中一个并显示另一个。

Answer 1

替换

$( "#capacitacion-content" ).hide( "slow"); $( "#bpm-content" ).show( "slow");

通过

$("#capacitacionContent" ).hide(); $("#bpmContent" ).show();

然后尝试

Answer 2

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>

jQuery hide（）和show（）函数相互重叠

2 个答案: