很难尝试让jQuery与WordPress一起工作

Question

我查看了这个论坛中的其他示例，但没有任何效果。该脚本在独立的Bootstrap 4文件中运行良好，但是在WordPress中它根本不起作用。 使用"底带"儿童主题。这是一个显示在移动视图中的按钮，用于关闭/打开平底锅。 这是代码笔

jQuery(document).ready(function($) {
$('#SearchArea').on('show.bs.collapse', function() {
$('#closeButton').html('Open');
});
$('#SearchArea').on('hide.bs.collapse', function() {
$('#closeButton').html('Close');
});
});

Answer 1

WordPress在"无冲突"模式下加载jQuery，以避免与其他库的命名空间冲突。

将脚本包装在一个匿名函数中，该函数将 jQuery 映射到$如下所示：

(function($) {
$('#SearchArea').on('show.bs.collapse', function() {
$('#closeButton').html('Open');
});
$('#SearchArea').on('hide.bs.collapse', function() {
$('#closeButton').html('Close');
});
})( jQuery );

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Answer 2

在 Wordpress 中，$ 不用于 jquery。尝试下面的代码我认为这对你有用。

jQuery(document).ready(function($) {
jQuery('#SearchArea').on('show.bs.collapse', function() {
jQuery('#closeButton').html('Open');
});
jQuery('#SearchArea').on('hide.bs.collapse', function() {
jQuery('#closeButton').html('Close');
});
});

Answer 3

感谢您的所有帮助。错误在我这边。ID 上的拼写错误。不敢相信我花了这么多时间试图解决问题......哈哈