JQuery hide() 和 show() 函数相互重叠答案

【问题标题】：JQuery hide() and show() functions overlaping each otherJQuery hide() 和 show() 函数相互重叠
【发布时间】：2019-02-11 16:49:06
【问题描述】：

我正在尝试根据对图像的点击来显示和隐藏页面上的元素，如下所示。


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

    });

});

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

【问题讨论】：

请为您目前所做的工作创建一个 sn-p。我们确实需要查看 HTML 来发现问题，例如，如果您的图像重叠，您总是可以单击同一个元素。
看起来您没有带有id=bpm-content 的元素，或者该元素以其他方式不可见（例如，不在页面上，在另一个元素后面，白色背景上的白色文本（看到这种情况发生）足够的时间！））。除非您可以创建一个可以证明问题的有效 sn-p（在问题中），否则无法帮助您。
我无法制作 sippet，但如果您尝试使用您仍然可以看到的代码，我可以将您链接到相关网站consolrest.com/servicios
从投票到结束：寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及重现它所需的最短代码 在问题本身。没有明确问题陈述的问题对其他读者没有用处。见：minimal reproducible example
在这种情况下，只需查看您在每个 case 中的内容 - 第一个隐藏 7 件事并重新显示 1，第二个隐藏 6 并重新显示1. 不要隐藏+显示相同的项目（如果您单击两次相同的项目，在 UI 中看起来很糟糕）。所以看起来它没有隐藏它，因为您在这种情况下缺少.hide()。 practicas不隐藏capacitacion-content

标签： javascript jquery wordpress logic

【解决方案1】：

替换

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

由

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

试试

【讨论】：

【解决方案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>

【讨论】：