我的 JQuery 功能不会激活答案

【问题标题】：My JQuery function wont activate我的 JQuery 功能不会激活
【发布时间】：2016-12-28 01:42:19
【问题描述】：

我试图让我的背景图像随着鼠标在#titleheader 类对象上移动时移动。页面呈现正常，但功能未激活。我在 Django 工作。我从基本模板中添加了第一个（页面顶部）#titleheader 对象，该对象扩展到包含另一个 #titleheader 对象的主模板。我已经将这两个模板编译成 chrome 在渲染下面的页面时会看到的内容。我怀疑该行有问题：$(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px'); 但我无法弄清楚我的代码中要更改的内容。

我的索引页面如下：

    <!doctype html>
<html>
    <head>
        <style> #landing-content {
  background-size: 110%;
  height: 110%;
  width: 110%;
  overflow: hidden;
  background-repeat: no-repeat;
        } </style>

        <title>Home Page</title>
        <link rel="stylesheet" href="/static/courses/css/layout.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <script>
            $(document).ready(function(){
                $(".titleheader").mousemove(function(event){
                    $(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px');
                });
            });
        </script>
    </head>

<body id="landing-content" background="/static/courses/images/back7.jpg">
  <section class="site-container slider">
    <article class="glass down">
      <div class="titleheader" style="width:100%;height:80px;position:absolute;top:0;bottom:100%;left:0;right:0;background-color:rgba(229,240,247,0.7);border-width:1px;z-index:0;border-bottom-style:solid;border-color:#f0fafb;">
    <a href="/" class="titleheaderimg">
        <img src="/static/courses/images/tz_blue2.png" alt="G" class="titleheaderimg" style="z-index:100;opacity:1;align-self:center;position:relative;top:9%;left:1%;">
    </a>
      </div>
    </article>

<div style="height:100px;">
    <p>
    </p>
</div>
<div class="centrediv" style="width:720px;position:absolute;top:26%;bottom:45%;left:0%;right:0;margin:auto;background-color:rgba(229,240,247,0.7);border-radius:20px;border-color:#f0fafb;border-width:1px;">
    <h2 style="text-align:center;vertical-align:middle;opacity:1">Hi,<span><br><br></span>We are a <span><a href="/courses/team/">XYZ based team</a></span> that works with educators to improve their efficiency using state-of-the-art language processing technology.<span></span>
        <br><span><a href="/courses/product/">Know more.</a></span></h2>
</div>

<div class="centrediv" style="position:absolute;top:86%;bottom:0;left:47%;right:0;margin:auto;">
    <h3><a href="/courses/contact/">Contact us.</a></h3>
</div>

  </section>
</body>
</html>

更新：

代码现已更新，在控制台、pycharm、chrome 开发工具或任何地方都没有错误。背景还是不动！有人可以帮我解决这个问题吗？谢谢！

【问题讨论】：

我禁用了所有扩展。我没有在 devtools 中收到错误。但是 Jquery 功能仍然没有激活。我的
刚刚检查了两个。仍然没有运气。 :(
对。我将其更改为“.titleheader” - 仍然没有。您在这里推荐哪个调试器？为什么这篇文章没有得到更高的知名度？已经几个小时了，只有 9 次观看？不明白！

标签： javascript jquery css django-templates

【解决方案1】：

根据mouseevent.pageX上的MDN，

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

您说您使用的是 Chrome，而 Chrome 被列为支持 pageX 和 pageY 访问器的唯一浏览器，但可能值得考虑另一种方式。所有现代浏览器都支持MouseEvent.clientX - 你能让它工作吗？

另外，我在使用$(this) 选择器时遇到了问题——我更喜欢使用完全限定的元素选择器，因为无论如何该方法只会处理一个元素。可能值得一试。

祝你好运！

【讨论】：