Question

我有一些代码在WordPress的html编辑器中完美运行。问题是，当切换到可视化编辑器时，它会删除javascript。我是一个新手，当涉及到代码，并想知道是否有人可以帮助分离javascript，所以我可以将它作为单独的脚本添加到wordpress页面。

<div class="couponactivate">
    <div class="coupon1">
        <h3>Subtitle</h3>
        <p>This is our Standard Coupon which gives 10% off</p>
    </div>
    <div class="activatebutton">
        <div style="position:relative;"><a onclick="jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide()" target="_blank" href="http://www.test.com" rel="nofollow">DOJU</a>
            <div onclick="window.open('http://www.test.com');jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide()" id="jcorgcr-clean-jcorgcoupon-coupon1" class="couponrevealcoupon">REVEAL COUPON</div>
        </div>
        <div class="expiry">Expires 31 July 2014</div>
    </div>
    <div style="clear:both;"></div>
</div>

Answer 1

您真的应该向class添加ID或.activatebutton > div > div，但是如果您想保持标记不变：

<script>
    jQuery(document).ready(function() {
        jQuery('.activatebutton').on('click',function() {
            jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide();
        });

        jQuery('.activatebutton > div > div').on('click',function() {
            window.open('http://www.test.com');
            jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide();
        });
    });
</script>

Answer 2

基本上你想要做的是从HTML外部而不是元素本身绑定到onclick。所以不要这样：

<a onclick="jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide()" target="_blank" href="http://www.test.com" rel="nofollow">DOJU</a>

您可能会遇到以下情况：

<a id="someLink" target="_blank" href="http://www.test.com" rel="nofollow">DOJU</a>
<script type="text/javascript">
    jQuery('#someLink').click(function () {
        jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide();
    });
</script>

可以将script块放在页面的其他位置，或者将脚本放入单独的文件中，script块只能引用该文件。

请注意，这是一个非常简单的示例，仅用于演示从元素外部绑定元素事件的想法。有很多事情要考虑，我想你会找到那些东西并通过练习来学习它们。例如，由于按顺序解析页面，因此需要在链接标记之后放置该脚本才能使其工作。如果它在链接标记之前，则您需要将其包装在文档的ready事件中，以等待标记加载，然后再尝试绑定到其事件。像这样：

<script type="text/javascript"> jQuery(function () { jQuery('#someLink').click(function () { jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide(); }); }); </script> <a id="someLink" target="_blank" href="http://www.test.com" rel="nofollow">DOJU</a>

如果标签随着时间的推移而变化（例如动态添加/删除），那么在绑定其事件方面还会有更多考虑因素。但最简单的是，使用jQuery（因为你已经在使用它），你只需要识别元素并在jQuery标识的元素（或元素集）上使用类似click()函数的东西来绑定那件事。

Answer 3

既然你是新人，问题很简单，我会帮助你。下次你必须先尝试。

myscript.js：

jQuery(function() {
    jQuery(".activatebutton a").on("click", function() {
        jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide();
    });

    jQuery("#jcorgcr-clean-jcorgcoupon-coupon1").on("click", function() {
        window.open('http://www.test.com');
        jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide();
    });
}

把它放在head标签中（在jquery之后）：

<script type="text/javascript" src="myscript.js"></script>

html的其余部分：

<div class="couponactivate"><div class="coupon1">
<h3>Subtitle</h3>
<p>This is our Standard Coupon which gives 10% off</p>
</div><div class="activatebutton"><div style="position:relative;"><a target="_blank" href="http://www.test.com" rel="nofollow">DOJU</a><div id="jcorgcr-clean-jcorgcoupon-coupon1" class="couponrevealcoupon" >REVEAL COUPON</div></div>
<div class="expiry">Expires 31 July 2014</div>           
</div><div style="clear:both;"></div></div>

Answer 4

希望这有助于你

            <!DOCTYPE html>
    <html  >
    <head>

    <script type="text/javascript" src="globe/script/jquery.js"></script>

    <title>
    Html5 All in One
    </title>
    </head>

    <body >
    <div class="couponactivate">
    <div class="coupon1">
    <h3>Subtitle</h3>
    <p>This is our Standard Coupon which gives 10% off</p>
    </div>
    <div class="activatebutton">
    <div style="position:relative;"><a  target="_blank" href="http://www.test.com" rel="nofollow">DOJU</a>
    <div  id="jcorgcr-clean-jcorgcoupon-coupon1" class="couponrevealcoupon">REVEAL COUPON</div>
    </div>
    <div class="expiry">Expires 31 July 2014</div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <script>
    $(document).ready(function()
    {
    $(".activatebutton a").click(function(){

    jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide()
    })

    $("#jcorgcr-clean-jcorgcoupon-coupon1").click(function(){

    window.open('http://www.test.com');jQuery('#jcorgcr-clean-jcorgcoupon-coupon1').hide()
    })


    })
    </script>   
    </body>
    </html>

如何分离javascript，使其不是内联的，而是作为一个单独的片段

4 个答案: