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

Question

所以这是我的问题，我正在为使用 jquery 的网站制作悬停效果的移动样式。尽管我一直在将希望受移动样式影响的元素放入变量中。虽然我的代码在我这样做时不起作用。我不太确定我做错了什么，但这是我的 jquery 脚本的 sn-p 以了解我正在尝试做什么：

$(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 变量，代码 sn -p 将无法工作。

Answer 1

你试图做的基本上注定要失败。这一行：

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

创建一个 jQuery 对象，其中包含 DOM 中与选择器匹配的所有元素" 到任何元素，那么它将是空的。

您可能想要做的是使用委托事件处理。使该变量成为选择器字符串：

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”，以确保它们仅在启用触控的客户端上生效，或在非触控启用的客户端上生效。