Question

虽然这个Jquery函数工作正常，但我遇到了上述错误。

HTML：

<div id="context">
            <h2>Digital Library</h2>
            <a href="#" id="first" class="open">What is Digital Library?</a>
            <p id="one" style="display:none;">A digital library is a special library with a focused collection of digital objects that can include text, visual material, audio material, video material, stored as electronic media formats (as opposed to print, microform, or other media), along with means for organizing, storing, and retrieving the files and media contained in the library collection.</p><br>
            <a href="#" id="second" class="open">How to search for specific ebook?</a>
            <p id="two" style="display:none;">To search an ebook, you just need to search for your desire ebook in below text boxes.When you click on search, a table with relevant results will show up.</p><br>
            <a href="#" id="third" class="open">How to download ebook?</a>
            <p id="three" style="display:none;">To download an ebook you just need to click on download link, in the table results</p>
        </div>

Jquery的：

<script type="text/javascript">
$(document).on('click','.open', function(event) {
    event.preventDefault();
    var target = "#" + this.getAttribute('#context');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});
</script>

但是因为这个链接没有打开。

HTML：

<ul class="dropdown-menu ebook">
                <li><a href="ebook.php">Ebooks</a></li>
                <li><a href="research.php">Research Journal</a></li>
</ul>

我已经检查了链接拼写和其他方面，但无法找到任何解决方案。请帮我！谢谢

Answer 1

这告诉你target中没有与选择器匹配的元素。由于没有匹配元素，offset会返回undefined;当您尝试执行undefined.anything时，会出现错误。

所以你需要查看target并弄清楚为什么它不是你想要获得的元素的有效选择器。您可以通过在scrollTop: $(target).offset().top行上设置断点并将光标悬停在target变量上来使用浏览器中内置的调试器来完成此操作。

现在您已经引用了HTML，我们可以看到类open的元素没有#context属性（这将是一个非常非常奇怪的名称 - 写作非常尴尬，如果有可能的话 - 无论如何）。

如果您添加了data-context="one"等等：

<a href="#" id="first" data-context="one" class="open">What is Digital Library?</a>

..然后使用data-context：

var target = this.getAttribute("data-context");

......并展示了元素：

$(target).show();

......它会起作用：

$(document).on('click', '.open', function(event) {
  event.preventDefault();
  var target = "#" + this.getAttribute('data-context');
  $(target).show();
  $('html, body').animate({
    scrollTop: $(target).offset().top
  }, 2000);
});

<div id="context">
  <h2>Digital Library</h2>
  <a href="#" id="first" data-context="one" class="open">What is Digital Library?</a>
  <p id="one" style="display:none;">A digital library is a special library with a focused collection of digital objects that can include text, visual material, audio material, video material, stored as electronic media formats (as opposed to print, microform, or other media), along with
    means for organizing, storing, and retrieving the files and media contained in the library collection.</p>
  <br>
  <a href="#" id="second" data-context="two" class="open">How to search for specific ebook?</a>
  <p id="two" style="display:none;">To search an ebook, you just need to search for your desire ebook in below text boxes.When you click on search, a table with relevant results will show up.</p>
  <br>
  <a href="#" id="third" data-context="three" class="open">How to download ebook?</a>
  <p id="three" style="display:none;">To download an ebook you just need to click on download link, in the table results</p>
</div>
<div style="height: 30em"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

那说，它比必要的复杂得多，因为它们显示的链接和段落彼此相邻。链接根本不需要id s（他们从未这样做过，除非你将它们用于你未展示的东西），段落也没有（除非，你再次使用它们作为你的东西）没有表明）。相反，只需使用$(this).next()：

$(document).on('click', '.open', function(event) {
  event.preventDefault();
  var target = $(this).next();
  target.show();
  $('html, body').animate({
    scrollTop: target.offset().top
  }, 2000);
});

$(document).on('click', '.open', function(event) {
  event.preventDefault();
  var target = $(this).next();
  target.show();
  $('html, body').animate({
    scrollTop: target.offset().top
  }, 2000);
});

<div id="context">
  <h2>Digital Library</h2>
  <a href="#" class="open">What is Digital Library?</a>
  <p id="one" style="display:none;">A digital library is a special library with a focused collection of digital objects that can include text, visual material, audio material, video material, stored as electronic media formats (as opposed to print, microform, or other media), along with
    means for organizing, storing, and retrieving the files and media contained in the library collection.</p>
  <br>
  <a href="#" class="open">How to search for specific ebook?</a>
  <p id="two" style="display:none;">To search an ebook, you just need to search for your desire ebook in below text boxes.When you click on search, a table with relevant results will show up.</p>
  <br>
  <a href="#" class="open">How to download ebook?</a>
  <p id="three" style="display:none;">To download an ebook you just need to click on download link, in the table results</p>
</div>
<div style="height: 30em"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

如果出现错误，则该功能无法正常工作。
您获得了属性#context，但我认为您需要属性context（没有＃）。
您分享的HTML与Javascript无关

要解决它：

<script type="text/javascript">
$(document).on('click','.open', function(event) {
    event.preventDefault();
    var target = "#" + this.getAttribute('context'); // see here
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});
</script>

因为$(target)找不到任何元素而产生错误，所以没有offset()方法且没有top属性。

Answer 3

Instead of this code,

 event.preventDefault();
    var target = "#" + this.getAttribute('#context');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);

使用此，

event.preventDefault();
$("body, html").animate({
            scrollTop: $($(this).attr('context')).offset().top 
        }, 2000);

Jquery：未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

3 个答案: