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”之前的那个元素“对于任何元素，那么它将是空的。

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

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);
   });

如果你愿意，你可以在useragent测试之外做，并且只需要测试添加类。

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

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

1 个答案: