使用 Jquery 显示或隐藏 Elementor 部分答案

【问题标题】：Show or hide Elementor sections with Jquery使用 Jquery 显示或隐藏 Elementor 部分
【发布时间】：2020-11-25 00:49:32
【问题描述】：

https://staging-regattaatnewriver.kinsta.cloud/floorplans/

您好，我正在尝试使用 jquery 在上面的页面上显示/隐藏部分。

jQuery(function() {
   jQuery('#colorselector').change(function(){
      jQuery('.colors').hide();
      jQuery('#' + $(this).val()).show();
    });
});

还有这个选择字段

<Select id="colorselector">
 <option value="red">One</option>
 <option value="yellow">Two</option>
 <option value="blue">Three</option>
</Select>

我在 elementor 上有所有匹配的 IDS 和 CLASSES 但是当我选择一些东西时，所有的字段都消失了，没有任何显示。谁能帮帮我？

【问题讨论】：

我在您的站点中看到，您有两个 id="yellow, red, blue" 的选择器，并且 id 大多是唯一的，所以这个问题可能是另一个问题：(index):98 Uncaught TypeError : 当你点击更改时，$ 不是一个函数
@AneesHikmatAbuHmiad 我删除了额外的选择器，查看我的代码我该如何解决？
我给出了答案并解释了如何解决它
@AneesHikmatAbuHmiad 是的，A+！你知道如何添加一个应该全部的选项吗？
谢谢，你可以通过添加一个值为 null 或 all 的新选项来做到这一点，并检查这个值是否出现，然后你可以 jQuery('.colors').show();嵌套隐藏，这将是工作。

标签： jquery wordpress elementor

【解决方案1】：

您有以下问题之一：

您的 ID 在网站上不是唯一的，但它最独特
您在演示中选择错误（index):98 Uncaught TypeError: $ is not a function 并且需要确保您包含 jQuery 或允许 $（要解决此问题，只需将 $(this).val() 替换为 jQuery(this).val())）

工作示例：

jQuery(function() {
   jQuery('#colorselector').change(function(){
      jQuery('.colors').hide();
      jQuery('#' + jQuery(this).val()).show();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
 <option value="red">One</option>
 <option value="yellow">Two</option>
 <option value="blue">Three</option>
</Select>

<!-- Simulate your issue -->
<div id="red" class="colors">Red 1</div>
<div id="yellow" class="colors">yellow 1</div>
<div id="blue" class="colors">blue 1</div>


<div id="red" class="colors">Red 2</div>
<div id="yellow" class="colors">yellow 2</div>
<div id="blue" class="colors">blue 2</div>

【讨论】：

@Annees 谢谢！那行得通，我将 $ 切换为 jQuery 并且它起作用了....现在我需要弄清楚如何进行选择以显示所有内容