Question

我有一个使用fullpage.js的全部版块的网站。每个部分都有一个独特的＆＃34; .row＆＃34;和班级＆＃34; .light＆＃34;或＆＃34; .dark＆＃34;，取决于行。

我试图改变6黑暗与黑暗之间的关系每个卷轴上随机点亮svg徽标。

每个徽标都有一个如此独特的名称：

dark_logo_1.svg
dark_logo_2.svg
dark_logo_3.svg
...
light_logo_1.svg
light_logo_2.svg
light_logo_3.svg
...

HTML：

<nav>
  <a id="logo" href="#">
    <img id="moody-logo" src="">
  </a>
</nav>

<body>
 <div class="row light">CONTENT</div>
 <div class="row dark">CONTENT</div>
 <div class="row light">CONTENT</div>
 <div class="row dark">CONTENT</div>
...
</body>

到目前为止，这是我的jquery代码，使用scrollspy.js：

<script src="http://path-to-js-folder/scrollspy.js"></script>

$(document).ready(function() {

var randomNumber = Math.floor((Math.random() * 5) + 1);

$('.row').on('scrollSpy:exit', function() {
    if (jQuery(this).hasClass('dark')){
        var newColor = "light";
    } else {
        var newColor = "dark";
    }

   var logoFileName = newColor + "_logo_" + randomNumber + ".svg";

    $("#moody-logo").attr("src", "http://path-to-logos-folder/" + logoFileName);
});
});

有点卡住了，无法在html中获取src，我的＃moody-logo显示除空白src以外的任何内容（src =＆＃34;＆＃34;）。

非常感谢你的帮助！

滚动时随机更改徽标

0 个答案: