javascript - 如何从 jquery 中的选择器字符串正确创建变量

Question

所以这是我的问题，我正在使用 jquery 为网站的悬停效果设计移动样式。尽管我一直在将我想要受移动样式影响的元素放入变量中。尽管每当我这样做时我的代码都不起作用。我不太确定我做错了什么，但这里有一段我​​的 jquery 脚本，可以让您了解我正在尝试做什么:

$(function ($) {

     var slidebar = new $.slidebars({siteClose:true, scrollLock:true}), 
         ua = navigator.userAgent,
         navslide1 = $('nav.slide ul li:nth-child(1) a.mobile-nav-hover');
         // I'm trying to create a variable for nav.slide that works. --%>


      if (/iPod|iPad|iPhone|Android/.test(ua)) {

           $('nav.slide ul li a').removeClass('hover').addClass('mobile-nav-hover');

           // This is where I'm having problems. If I use the variable this code won't work. --!>
           navslide1.on('touchstart click', function(){

                 navslide1.css({

                       "background-color":"#ffffff",
                       "color":"#000000"

                 });

            }).on('touchend click', function(){

                   setTimeout(function(){
                       navslide1.css({

                              "background-color":"transparent",
                              "color":"#ffffff"

                       });
                  }, 120);

   }); 

      }

});

如果有人能帮我找出问题所在，那就太好了!

注意:当我运行这段代码时，控制台中没有弹出任何错误，但如果我使用 navslide1 变量，代码片段将无法正常工作。

Answer 1

您尝试做的基本上注定要失败。这一行:

     navslide1 = $('nav.slide ul li:nth-child(1) a.mobile-nav-hover');

创建一个 jQuery 对象，其中包含 DOM 中与选择器匹配的所有元素在执行代码时。如果那是在您添加类“mobile-nav-hover”之前"到任何元素，那么它将是空的。

您可能想要做的是使用委托(delegate)事件处理。使该变量只是选择器字符串:

navslide1 = 'nav.slide ul li:nth-child(1) a.mobile-nav-hover';

然后:

   $("body").on('touchstart click', navslide1, function() {
       $(navslide1).css({

           "background-color": "#ffffff",
           "color": "#000000"

       });

   }).on('touchend click', navslide1, function() {

       setTimeout(function() {
           $(navslide1).css({

               "background-color": "transparent",
               "color": "#ffffff"

           });
       }, 120);
   });

您可以在用户代理测试之外执行此操作，如果您愿意，只需让测试添加该类即可。

如果您使用 Modernizr 或其他工具来检测触摸事件的可用性，整个事情可能会变得简单得多。 (请注意，您当前的检查不会考虑许多基于 Windows 的 PC 和带触摸屏的平板电脑。)如果您这样做，那么您不必检查任何内容，也不必添加任何类；您可以在任何选择器字符串前加上“.touch”前缀，以确保它们只对启用触摸的客户端生效，或者在不启用触摸的客户端上添加“.no-touch”。