google chrome debug console jquery error＆＃34; token ILLEGAL

Question

我正在使用wordpress，并且我试图运行在wordpress页面内创建的脚本。 在wordpress外面一切正常，但没有在wp内部复制。 Google Chrome调试控制台显示以下错误：

  

Uncaught SyntaxError：Unexpected toke ILLEGAL

脚本就是这个：

<script>
    jQuery(document).ready(function ($) {
        $("#sys1").click(function () {
            $("#hub img").css("opacity", "0.3");
            $("#thermostat img").css("opacity", "0.3");
            $("#boiler img").css("opacity", "0.3");
            $("#valve img").css("opacity", "0.3");
            $("#sensor img").css("opacity", "0.3");
            $("#plug img").css("opacity", "0.3");
            $("#underfloor img").css("opacity", "0.3");
            $("#hub img").css("opacity", "1");
            $("#thermostat img").css("opacity", "1");
            $("#boiler img").css("opacity", "1");
            $(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test divs content add panel 1</div>");
            $("#sys2").removeClass("active");
            $("#sys3").removeClass("active");
            $("#sys4").removeClass("active");
            $("#sys5").removeClass("active");
            $("#sys1").addClass("active");
        });
    });
</script>

任何想法？非常感谢

修改

这里是我的wp页面中的完整代码：

<div class="page-content-big-title"><h1>System products</h1></div>
<div class="inner-container">
<div class="products-page-products-required-display">
            <ul>
                <li id="hub"><img src="../wp-content/themes/Make-child/img/placeholder.png"/> </li>
                <li id="thermostat"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
                <li id="boiler"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
                <li id="valve"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
                <li id="sensor"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
                <li id="plug"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
                <li id="underfloor"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
            </ul>
        </div>
        <div class="products-page-system-selectors">
            <ul>
                <li id="sys1" class="active">System option</li>
                <li id="sys2">System option</li>
                <li id="sys3">System option</li>
                <li id="sys4">System option</li>
                <li id="sys5">System option</li>
            </ul>
        </div>
        <div class="products-page-system-information-container"><div class='products-page-system-information-added-content'>Test div's content add panel 1</div></div>

</div>
<script>
 jQuery(document).ready(function ($) {
  $("#sys1").click(function() {
                $("#hub img").css("opacity", "0.3");
                $("#thermostat img").css("opacity", "0.3");
                $("#boiler img").css("opacity", "0.3");
                $("#valve img").css("opacity", "0.3");
                $("#sensor img").css("opacity", "0.3");
                $("#plug img").css("opacity", "0.3");
                $("#underfloor img").css("opacity", "0.3");
                $("#hub img").css("opacity", "1");
                $("#thermostat img").css("opacity", "1");
                $("#boiler img").css("opacity", "1");
                $(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test divs content add panel 1</div>");
                $("#sys2").removeClass("active");
                $("#sys3").removeClass("active");
                $("#sys4").removeClass("active");
                $("#sys5").removeClass("active");
                $("#sys1").addClass("active");
            });
            $("#sys2").click(function() {
                $("#hub img").css("opacity", "0.3");
                $("#thermostat img").css("opacity", "0.3");
                $("#boiler img").css("opacity", "0.3");
                $("#valve img").css("opacity", "0.3");
                $("#sensor img").css("opacity", "0.3");
                $("#plug img").css("opacity", "0.3");
                $("#underfloor img").css("opacity", "0.3");
                $("#hub img").css("opacity", "1");
                $("#thermostat img").css("opacity", "1");
                $("#valve img").css("opacity", "1");
                $(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 2</div>");
                $("#sys1").removeClass("active");
                $("#sys3").removeClass("active");
                $("#sys4").removeClass("active");
                $("#sys5").removeClass("active");
                $("#sys2").addClass("active");
            });
            $("#sys3").click(function() {
                $("#hub img").css("opacity", "0.3");
                $("#thermostat img").css("opacity", "0.3");
                $("#boiler img").css("opacity", "0.3");
                $("#valve img").css("opacity", "0.3");
                $("#sensor img").css("opacity", "0.3");
                $("#plug img").css("opacity", "0.3");
                $("#underfloor img").css("opacity", "0.3");
                $("#hub img").css("opacity", "1");
                $("#valve img").css("opacity", "1");
                $("#sensor img").css("opacity", "1");
                $(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 3</div>");
                $("#sys1").removeClass("active");
                $("#sys2").removeClass("active");
                $("#sys4").removeClass("active");
                $("#sys5").removeClass("active");
                $("#sys3").addClass("active");
            });
            $("#sys4").click(function() {
                $("#hub img").css("opacity", "0.3");
                $("#thermostat img").css("opacity", "0.3");
                $("#boiler img").css("opacity", "0.3");
                $("#valve img").css("opacity", "0.3");
                $("#sensor img").css("opacity", "0.3");
                $("#plug img").css("opacity", "0.3");
                $("#underfloor img").css("opacity", "0.3");
                $("#hub img").css("opacity", "1");
                $("#thermostat img").css("opacity", "1");
                $("#boiler img").css("opacity", "1");
                $(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 4</div>");
                $("#sys1").removeClass("active");
                $("#sys2").removeClass("active");
                $("#sys3").removeClass("active");
                $("#sys5").removeClass("active");
                $("#sys4").addClass("active");
            });
            $("#sys5").click(function() {
                $("#hub img").css("opacity", "1");
                $("#thermostat img").css("opacity", "1");
                $("#boiler img").css("opacity", "1");
                $("#valve img").css("opacity", "1");
                $("#underfloor img").css("opacity", "1");
                $(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 5</div>");
                $("#sys2").removeClass("active");
                $("#sys3").removeClass("active");
                $("#sys4").removeClass("active");
                $("#sys5").addClass("active");
            });
        });
</script>

修改

我解决了这个问题只是改变了javascript代码，我认为.html（＆＃34;一些html标签＆＃34;）没有被wordpress很好地解释。

无论如何现在它工作正常。感谢