Question

我尝试按照question中的解释，在接受的答案中有一个有用的jsfiddle链接。
我有一个这样的基本页面：

<!doctype html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <style>
        section {
            display: none;
        }

        #home { height: 200px; background: beige; display: block;}
        #products { height: 1000px; background: honeydew; }
        #contact { height: 500px; background: seashell; }
    </style>
    <title> Leggy </title>

     <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

    <script>
        $("a").on("click", function() {
            var id = $(this).data("section");
            alert(id);
            $("section:visible").fadeOut(function() {
                $(id).fadeIn();
            });
        });
    </script>
</head>
<body>

<a href="#" data-section="#home">Home</a>
<a href="#" data-section="#products">Products</a>
<a href="#" data-section="#contact">Contact</a>

<div id="wrapper"></div>

<section id="home">Home</section>
<section id="products">Products</section>
<section id="contact">Contact</section>

</body> 
</html>

但是当它运行时，Firefox控制台只是说不推荐使用getUserData（）和setUserData（）。我无法真正理解这是什么意思以及如何解决它，因为这是唯一可能成为问题的东西，因为我可以看到......

实际上发生的事情是脚本没有被执行，我会说，因为警报没有启动。

我在哪里做错了？

Answer 1

全部包裹document.ready()：

$(document).ready(function(){
 $("a").on("click", function() {
            var id = $(this).data("section");
            alert(id);
            $("section:visible").fadeOut(function() {
                $(id).fadeIn();
            });
        });
})

Live Demo

Answer 2

在DOM中存在必要元素之前，您的Javascript代码正在执行 - 在click元素存在之前，您无法将a事件附加到a元素。

要解决这个问题，你应该在你的Javascript周围添加$(document).ready(function(){ ... }，这样可以确保只有在页面加载并设置了DOM后才会运行代码。

从数据属性获取值不起作用

2 个答案: