Onclick 后效果动画 (bodymovin.js) ID 没有任何反应答案

【问题标题】：Onclick after effects animation (bodymovin.js) ID nothing happensOnclick 后效果动画 (bodymovin.js) ID 没有任何反应
【发布时间】：2018-01-25 20:57:18
【问题描述】：

我在某些路径上有一个带有 ID 的后效 bodymovin.js SVG 动画（附图片）。我在这些 (cursor:pointer) 上添加了一些 css 样式，它们工作正常，但使用 jquery onClick 进行重定向似乎不起作用。任何想法为什么？

动画本身是在按下按钮后开始的叠加层中。

重定向代码：

<script>
  $(function() {
        document.getElementById("replay").onclick = function () {
        location.href = "www.yoursite.com";
    };
    });
</script>

动画代码：

<script>
$( ".animation" ).click(function() {
    var anim;
    var elem = document.getElementById('bodymovin_overlay')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        rendererSettings: {
            progressiveLoad:false
        },
        path: 'data_overlay.json'
    };
    anim = bodymovin.loadAnimation(animData);
});
</script>

另外附上图片：

【问题讨论】：

应该是document.getElementById("replay")，排除#绑定id属性我猜。

标签： javascript jquery svg

【解决方案1】：

从 document.getElementById("#replay") 中删除 #。

使用 document.getElementById("replay") (Native JS) 或通过 jQuery $('#replay')

【讨论】：

【解决方案2】：

我认为发生错误是因为您忘记添加分号。

var elem = document.getElementById('bodymovin_overlay')

到

var elem = document.getElementById('bodymovin_overlay');

【讨论】：

尝试使用 jQuery for $("#replay").on('click', function() { //do something });
问题已解决。覆盖 z-index 覆盖了动画，因此没有发生点击

【解决方案3】：

问题已解决 - 叠加层覆盖了动画 z-index，必须为其提供比叠加层更高的 z-index。

【讨论】：

【解决方案4】：

最终成功的代码，希望对某人有所帮助：

    var lookingForLinks = true;
    setTimeout(addLinksToSvgAnim, 1000);

    function addLinksToSvgAnim() {
        if (lookingForLinks) {
            let medicalG = document.getElementById("medical");
            let foodG = document.getElementById("food");
            let collabG = document.getElementById("collab");
            let volunteersG = document.getElementById("volunteers");
            let projectsG = document.getElementById("projects");
            let replayG = document.getElementById("replay");

            if (medicalG && foodG && volunteersG && projectsG) {
                lookingForLinks = false;
                medicalG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/medical-aid";
                });
                foodG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/humanitarian-aid";
                });
                collabG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/our-story/partners";
                });
                volunteersG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/get-involved";
                });
                projectsG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
                replayG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
            }
            setTimeout(addLinksToSvgAnim, 1000);
        }
    }

【讨论】：