一个简单的自定义灯箱失败

Question

我已经构建了一个简单的灯箱，很容易使用有机页面，我有代码处理codepen和本地文件，但是第二个我把它扔进wordpress它不起作用，也许你们可以帮我找到为什么。

基本上我有两个元素，较小的图像和全尺寸的灯箱。

jquery函数是

jQuery(document).ready(function($) {
 $('.feature-single-image').live("click", function(){
   $('.lightbox-bg').show();
 });
 $('.lightbox-bg').live("click", function(){
   $('.lightbox-bg').hide();
 });
});

我的入队脚本是

function wpb_adding_scripts() {
 wp_register_script('lightbox', get_template_directory_uri() . '/js/lightbox.js', array('jquery'),'1.1', true);
 wp_enqueue_script('lightbox');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

jquery脚本保存在子主题js文件夹中。

我无法想象为什么它不起作用但是会喜欢帮助解决这个问题。

同时

我还应该提一下带有.live的脚本（比特是我在类似帖子上看到的一个建议，但对我不起作用。原始脚本是

 jQuery(document).ready(function($) {
  $('.feature-single-image').click(function() {
    $('.lightbox-bg').show();
  });
  $('.lightbox-bg').click(function() {
    $('.lightbox-bg').hide();
   });
 });

Answer 1

实际上看起来您可能需要在Wordpress中更改一些设置以使用您想要的jQuery，请参阅How do I add a simple jQuery script to WordPress?

原始回答：

您可能在某处将另一个库设置为$作为jQuery之外的别名，尝试使用Immediately-Invoked Function Expression (IIFE)并将jQuery作为$传递：

(function ($) { // IIFE passing in jQuery as $, inside the scope of this function $ is an now alias for jQuery, all of your jQuery code should be inside this function or one like it 

    $(document).ready(function () {
        $('.feature-single-image').live("click", function () {
            $('.lightbox-bg').show();
        });
        $('.lightbox-bg').live("click", function () {
            $('.lightbox-bg').hide();
        });
    });

}(jQuery)); // pass in jQuery

您可以将所有$更改为jQuery，这也可以。我更喜欢IIFE。