使用 Jquery 显示或隐藏 Elementor 部分

Question

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

你好，我正在尝试使用 jquery 在上面页面的 show/hide 部分。

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

和这个 select 字段

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

我在 elementor 上拥有所有匹配的 IDS 和类但是当我 select 时，所有字段都消失了，什么也没有显示。谁能帮帮我？

Answer 1

您遇到以下问题之一：

您的ID在本站不唯一，而且最唯一
你的演示 select 中有一个错误（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>

使用 Jquery 显示或隐藏 Elementor 部分

Show or hide Elementor sections with Jquery

wordpress

jquery

elementor