Question

以下代码适用于我的浏览器，我尝试将其应用于我的WordPress页面：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Get jQuery -->    
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="js/typed.js"></script>

<script>
$(function(){

    $("#typed").typed({
        // strings: ["We are creative.", "We are hard-working.", "We 
are collaborative.", "Try it out!"],
        stringsElement: $('#typed-strings'),
        typeSpeed: 50,
        backDelay: 600,
        loop: true,
        contentType: 'text', // or text
        // defaults to false for infinite loop
        loopCount: false,
        callback: function(){ foo(); },
        resetCallback: function() { newTyped(); }
    });

    $(".reset").click(function(){
        $("#typed").typed('reset');
    });

});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log("Callback"); }

</script>
</head>
<body>
        <div id="typed-strings">
            <p>We are creative.</p>
            <p>We are collaborative.</p>
            <p>We are connected.</p>
            <p>We are Clarke.</p>
        </div>
        <span id="typed">We are</span>   
<style type="text/css">
body {
font-size: 80px;
color: blue;
}
</style>
</body>
</html>

当我将这段代码分成js和html for wordpress时（我将js放入可视化编辑器中的Raw JS选项，将html放入原始HTML），这些都不起作用。

有人可以告诉我为什么吗？感谢

Answer 1

这是因为Wordpress在没有冲突模式下使用jQuery。用$替换js代码中的所有jQuery。例如：

 $(".reset").click(function(){
        $("#typed").typed('reset');
  });

应该是

jQuery(".reset").click(function(){
    jQuery("#typed").typed('reset');
});

Answer 2

您应该将脚本放在脚本引用的元素之后。必须在脚本执行之前加载HTML元素。

在Wordpress中使用Visual Composer;原始js没有应用于我的原始HTML

2 个答案: