Question

我遇到一个问题，即jQuery似乎无法找到它的ID，即使它存在，我似乎也找不到任何问题。

该页面列出了项目，每个项目都包含在具有唯一ID的div中。在每个项目上都有一个按钮，当点击它时，它应该运行一个功能，将页面向下滚动到下一个项目。

示例HTML是这样的，它列出了两个项目，这两个项目都是从数据库加载并由PHP动态生成的，以生成静态HTML（不通过Ajax加载，我知道需要以不同的方式引用元素）。

<div id="project-24" class="project-item" data-this="#project-24" data-next="#project-25">
    <!-- Start: Main Slideshow -->
    <section id="slideshow" class="project-slideshow first">
        <div class="flexslider flexslider-slideshow">
            <ul class="slides">
            </ul>
        </div> 
    </section>
    <!-- End: Main Slideshow -->

    <!-- Start: Project details -->
    <section class="general project-detail" id="project-24-text">
        <div class="container">
            <h1 class="with-line"><span>. Travel Alphabet .</span></h1>
                <div class="row">
                    <div class="col-xs-12 col-md-4">
                        <p>Project Details here</p>

                        <p class="button"><a class="scrollable" href="#portfolio-25">Next &nbsp;&nbsp;&nbsp;<span class="fa fa-angle-down"></span></a></p>
                    </div>
                </div>
        </div>        
    </section>
    <!-- End: Project details -->
</div>

 <div id="project-25" class="project-item" data-this="#project-25" data-next="#project-26">
    <!-- Start: Main Slideshow -->
    <section id="slideshow" class="project-slideshow first">
        <div class="flexslider flexslider-slideshow">
            <ul class="slides">
            </ul>
        </div> 
    </section>
    <!-- End: Main Slideshow -->

    <!-- Start: Project details -->
    <section class="general project-detail" id="project-24-text">
        <div class="container">
            <h1 class="with-line"><span>. Travel Alphabet .</span></h1>
                <div class="row">
                    <div class="col-xs-12 col-md-4">
                        <p>Project Details here</p>

                        <p class="button"><a class="scrollable" href="#portfolio-25">Next &nbsp;&nbsp;&nbsp;<span class="fa fa-angle-down"></span></a></p>
                    </div>
                </div>
        </div>        
    </section>
    <!-- End: Project details -->
</div>

当点击下一个按钮时，它被一些jQuery拾取并执行;

function scrollToAnchor(id){
    var header = $('header');
    var tag = $(id);

    var pos = tag.offset().top - header.outerHeight();

    $('html,body').animate({scrollTop: pos}, 'fast');
}

$(document).ready(function(){
    $('.scrollable').click(function(){
        var href = $(this).attr('href');
        scrollToAnchor(href);

        return false;
    });
});

当我查看页面并单击按钮时，jQuery会出现以下错误;

script.js：28未捕获的TypeError：无法读取属性'top' 未定义

我已经尝试将scrollToAnchor方法修改为以下内容，它似乎确认找不到该元素，因为“未找到”显示在控制台中;

function scrollToAnchor(id){
    var header = $('header');
    var tag = $('body').find(id);

    console.log("looking for " + id);

    if (tag.length) {
        console.log(id + " found");
    } else {
        console.log(id + " not found");
    }

    var pos = tag.offset().top - header.outerHeight();

    $('html,body').animate({scrollTop: pos},'fast');
}

Answer 1

我可能误解了，但如果您尝试链接到页面中的某个部分，则根本不需要JQuery或JavaScript。

E.g：

<div>
  <section id="section-1">
    <h1>Section 1</h1>
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
    <a href="#section-2">Next</a>
  </section>
  
  <section id="section-2">
    <h1>Section 2</h1>
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
    <a href="#section-3">Next</a>
  </section>
  
  <section id="section-3">
    <h1>Section 3</h1>
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
    <a href="#section-4">Next</a>
  </section>
  
  <section id="section-4">
    <h1>Section 4</h1>
    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
    <a href="#section-1">To top</a>
  </section>
</div>

Answer 2

你的代码

    $(document).ready(function(){
    $('.scrollable').click(function(){
        var href = $(this).attr('href');
        scrollToAnchor(href);

        return false;
    });
});

会返回你的href：＃portfolio-25尝试用你的div id替换它。

...编辑......

而不是这个

 <p class="button"><a class="scrollable" href="#portfolio-25">Next &nbsp;&nbsp;&nbsp;<span class="fa fa-angle-down"></span></a></p>

你可以有简单的按钮

<input type = 'button' class = 'scrollable' name = 'project-25' /> <i class = 'fa fa-angle-down'></i> Next

并进入你的JS函数

$(document).ready(function(){
    $('.scrollable').click(function(){
        var href = $(this).attr('name');
        scrollToAnchor(href);

        return false;
    });
});

请考虑根据您的要求编辑您的按钮，这只是一个例子。

即使它存在，jQuery也无法通过它的Id找到元素

2 个答案: