jquery this attr href is undefined

我有一个奇怪的问题，我有一些与我的页面上的“scrollto”类的链接，如果你点击它，本质上它只是去页面上的该部分。顶部链接似乎工作正常（虽然他们提醒未定义时点击）。点击时侧浮动导航也返回undefined，但什么也不做。jquery this attr href is undefined

它在Chrome中运行得非常好，但我遇到了Firefox和IE（不确定Mac浏览器）的问题。

这里是我的代码：

$('.scrollto').click(function(e){ 
    e.preventDefault(); 
    alert($(this).attr('href')); 
    var aid  = $(this).attr('href').replace('#',''); 
    var aTag = $('body').find('.section[name="'+aid+'"]').first(); 
    var offset = aTag.offset().top - 90; 
    $('html,body').stop().animate({scrollTop:offset},1500); 
    });

这里是顶部的链接（即工作）。

<ul> 
    <li><span class="number">01</span> <span class="angle">/</span> <a href="#item-01" class="scrollto">Yoga</a></li> 
    <li><span class="number">02</span> <span class="angle">/</span> <a href="#item-02" class="scrollto">American Tribal Style Belly Dancing</a></li> 
    <li><span class="number">03</span> <span class="angle">/</span> <a href="#item-03" class="scrollto">Tai Chi - Beginner</a></li> 
    <li><span class="number">04</span> <span class="angle">/</span> <a href="#item-04" class="scrollto">Tai Chi - Advanced</a></li> 
    <li><span class="number">05</span> <span class="angle">/</span> <a href="#item-05" class="scrollto">Chat + Stitch</a></li> 
    <li><span class="number">06</span> <span class="angle">/</span> <a href="#item-06" class="scrollto">Bubba Fun</a></li> 
    <li><span class="number">07</span> <span class="angle">/</span> <a href="#item-07" class="scrollto">Moving Bodies Gymnastics</a></li> 
    <li><span class="number">08</span> <span class="angle">/</span> <a href="#item-08" class="scrollto">Prams in the Park</a></li> 
    <li><span class="number">09</span> <span class="angle">/</span> <a href="#item-09" class="scrollto">Storytime</a></li> 
    <li><span class="number">10</span> <span class="angle">/</span> <a href="#item-10" class="scrollto">Kimblebees Playgroup</a></li> 
    <li><span class="number">11</span> <span class="angle">/</span> <a href="#item-11" class="scrollto">Kindy Gym</a></li> 
    <li><span class="number">12</span> <span class="angle">/</span> <a href="#item-12" class="scrollto">Mums Who Make Market</a></li> 
    <li><span class="number">13</span> <span class="angle">/</span> <a href="#item-13" class="scrollto">Wow! It's Italian</a></li> 
    <li><span class="number">14</span> <span class="angle">/</span> <a href="#item-14" class="scrollto">Cards Club</a></li> 
    <li><span class="number">15</span> <span class="angle">/</span> <a href="#item-15" class="scrollto">Walk + Chat</a></li> 
    <li><span class="number">16</span> <span class="angle">/</span> <a href="#item-16" class="scrollto">Dream Catcher Adult Workshop</a></li> 
    <li><span class="number">17</span> <span class="angle">/</span> <a href="#item-17" class="scrollto">Senior Citizens Club</a></li> 
    <li><span class="number">18</span> <span class="angle">/</span> <a href="#item-18" class="scrollto">Rensei Karate</a></li> 
    <li><span class="number">19</span> <span class="angle">/</span> <a href="#item-19" class="scrollto">Super Parents Multi Birth Club</a></li> 
    <li><span class="number">20</span> <span class="angle">/</span> <a href="#item-20" class="scrollto">Photography - Beginner</a></li> 
    <li><span class="number">21</span> <span class="angle">/</span> <a href="#item-21" class="scrollto">Mental Health First Aid for Youth</a></li> 
</ul>

这里的侧链接（这不这个特定页面上工作，但在主页上工作）

<div class="section-pagination vertical-align"> 
    <div> 
     <div class="previous"><a href="#item-01" class="scrollto"><i class="fa fa-angle-up"></i></a></div> 
     <div class="numbers"> 
      <p><span class="active">1</span></p> 
      <p>/</p> 
      <p>21</p> 
     </div> 
     <div class="next"><a href="#item-01" class="scrollto"><i class="fa fa-angle-down"></i></a></div> 
    </div> 
</div>

这就是它应该滚动到部分之一的例子：

<section id="3" name="item-03" class="section"> 
    <div class="container large"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="item"> 
        <svg class="ie-only" width="600px" height="400px" xmlns="http://www.w3.org/2000/svg"><polygon points="0 400,600 400,600 0,200 0" /></svg> 
        <div class="information"> 
         <div class="text"> 
          <h2><a href="http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses/article/3/tai-chi-beginner.html">Tai Chi - Beginner</a></h2> 
          <h3 class="new">New!</h3> 
          <p>Ever wanted to try Tai Chi, but not sure what it's all about? This...</p> 
          <div class="buttons"> 
           <a href="http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses/article/3/tai-chi-beginner.html" class="button-next"><i class="fa fa-angle-right"></i></a> 
          </div> 
         </div> 
        </div> 
        <div class="image"> 
         <a href="http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses/article/3/tai-chi-beginner.html"><img src="/images/thumbnail/image__OODzynSjIndmeWWiXIZg.jpg" alt="Tai Chi - Beginner" width="1170" height="670" /></a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <svg class="clip-svg"><defs><clipPath id="information-path-left" clipPathUnits="objectBoundingBox"><polygon points="0 0,1 0,0.66 1,0 1" /></clipPath></defs></svg> 
    <svg class="clip-svg"><defs><clipPath id="information-path-right" clipPathUnits="objectBoundingBox"><polygon points="0.345 0,1 0,1 1,0 1" /></clipPath></defs></svg> 
</section>

这里的页面：

http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses.html

任何帮助将是巨大的:)

来源

2017-06-07 Leanne Seawright

试着改变你的javascript，以这种方式

$('.scrollto').click(function(e){ 
    e.preventDefault(); 
    var aid  = $(this).attr('href').replace('#',''); 
    alert($(this).attr('href')); 
    var aTag = $('body').find('.section[name="'+aid+'"]').first(); 
    var offset = aTag.offset().top - 90; 
    $('html,body').stop().animate({scrollTop:offset},1500); 
});

来源

2017-06-07 00:09:34

jquery this attr href is undefined

回答

相关问题