Question

我正在尝试将由WordPress插件生成的此代码添加到同一页面两次 - 但它不会再次生成倒数计时器....是否有一个简单的更改我可以做到出现两次？

谢谢！

<script type="text/javascript">
<!--
jQuery(document).ready(function($){
    var austDay = new Date("2012/02/11 00:00");
    jQuery.countdown.regional["uji"] = {
        labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"],
        labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"],
        compactLabels: ["A", "L", "S", "Z"],
        whichLabels: null,
        timeSeparator: ':',
        isRTL: false
    };
    jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]);
    jQuery("#ujiCountdown").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt:  '#FFFFFF', color_sw:  '#000000',  ujic_txt: true, animate_sec: true});
    jQuery("#ujiCountdown").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
});
//-->
</script>

<div id="ujiCountdown"  class="ujic_center"></div>

Answer 1

ID需要更改。

<script type="text/javascript">

    <!--
                 jQuery(document).ready(function($){
                    var austDay = new Date("2012/02/11 00:00");
                    jQuery.countdown.regional["uji"] = {
                        labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"],
                        labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"],
                        compactLabels: ["A", "L", "S", "Z"],
                        whichLabels: null,
                        timeSeparator: ':', isRTL: false};
                    jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]);
                    jQuery("#ujiCountdown1").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt:  '#FFFFFF', color_sw:  '#000000',  ujic_txt: true, animate_sec: true});  
                    jQuery("#ujiCountdown1").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
                    });
    //-->
    </script><div id="ujiCountdown1"  class="ujic_center">


<script type="text/javascript">

    <!--
                 jQuery(document).ready(function($){
                    var austDay = new Date("2012/02/11 00:00");
                    jQuery.countdown.regional["uji"] = {
                        labels: ["Years", "Months", "Weeks", "Days", "Hours", "Minutes", "Seconds"],
                        labels1: ["Year", "Month", "Week", "Day", "Hour", "Minute", "Second"],
                        compactLabels: ["A", "L", "S", "Z"],
                        whichLabels: null,
                        timeSeparator: ':', isRTL: false};
                    jQuery.countdown.setDefaults(jQuery.countdown.regional["uji"]);
                    jQuery("#ujiCountdown2").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt:  '#FFFFFF', color_sw:  '#000000',  ujic_txt: true, animate_sec: true});  
                    jQuery("#ujiCountdown2").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});
                    });
    //-->
    </script><div id="ujiCountdown2"  class="ujic_center">

Answer 2

你需要添加另一个div - 当你第二次运行该函数时，它仍然在同一个div上运行。添加另一个div：

<div id="ujiCountdown2" class="ujic_center"></div>

然后在JS中，更改函数底部的以下行：

jQuery("#ujiCountdown, #ujiCountdown2").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt:  '#FFFFFF', color_sw:  '#000000',  ujic_txt: true, animate_sec: true});  
jQuery("#ujiCountdown, #ujiCountdown2").css({"width": (jQuery("#ujiCountdown").width()-10)+"px", "padding-left": "30px"});

然后将jQuery方法应用于两个div。

Answer 3

为了在页面上获得多个这些，您需要将第二个分配给不同的DOM元素。您是否可以使用不同的ID制作第二个div？然后你可以在第二个div上调用jQuery代码，它们都会显示，因为它们会不同。

<div id="ujiCountdown2"></div>

然后在同一个就绪块中，您可以调用

jQuery("#ujiCountdown2").countdown({until: austDay, text_size: '55', color_down: '#3A3A3A', color_up: '#635b63', color_txt:  '#FFFFFF', color_sw:  '#000000',  ujic_txt: true, animate_sec: true});

如何将此jQuery Twice添加到同一页面？

3 个答案: