Question

我有一些脚本可以使用复选框和下拉菜单创建计算器。

我正在重建新域名的网站，因此此代码位于两个网站上。

代码停止在头部工作，所以我将它移动到页脚，它再次工作。我删除了代码，以便检查脚本运行时无法看到的内容。当我把脚本放回去时，它又停止了工作。现在无论我把它放在哪里，它都不会起作用。

Chrome中的开发者工具会给j（）带来错误。说它无效，但它在旧网站上没有出现这个错误，脚本是相同的。这是代码：

<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/innerstyle.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/js/validation.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/js/jquery.selectbox-0.2.js"></script>
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/jquery.selectbox.css" type="text/css" media="screen" />

<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function(){
j("#calc-num-people").selectbox();
j("#calc-time").selectbox();
j('#checked1').click(function(e) {
 if (j('input#chk-drinking').is(':checked')) 
    {
        j('#checked1').removeClass("checkbox added");            
        j('#checked1').addClass("checkbox add1");
        j('input#chk-drinking').removeAttr('checked');
    }
    else
    {
        j('#checked1').removeClass("checkbox add1");
        j('#checked1').addClass("checkbox added");
        j('input#chk-drinking').attr('checked',true);      
    }
    calc_gallons();
});

j('#checked2').click(function(e) {
 if (j('input#chk-washing').is(':checked')) 
    {
        j('input#chk-washing').removeAttr('checked');           
        j('#checked2').removeClass("checkbox added");            
        j('#checked2').addClass("checkbox add1");
    }
    else
    {
        j('input#chk-washing').attr('checked',true);    
        j('#checked2').removeClass("checkbox add1");
        j('#checked2').addClass("checkbox added");
    }
    calc_gallons();
});

j('#checked3').click(function(e) {
 if (j('input#chk-cooking').is(':checked')) 
    {
        j('input#chk-cooking').removeAttr('checked');           
        j('#checked3').removeClass("checkbox added");            
        j('#checked3').addClass("checkbox add1");
    }
    else
    {
        j('input#chk-cooking').attr('checked',true);             
        j('#checked3').removeClass("checkbox add1");
        j('#checked3').addClass("checkbox added");
    }
    calc_gallons();
});
});

function calc_gallons() {
var drinking = (j('input#chk-drinking').attr('checked')) ? 1 : 0;
var washing = (j('input#chk-washing').attr('checked')) ? 1 : 0;
var cooking = (j('input#chk-cooking').attr('checked')) ? 1 : 0;

var answer = (j('#calc-num-people').val() * ((drinking * 0.5) + (washing * 0.25) + (cooking * 0.25)) * j('#calc-time').val());
j('.calc-answer-text').html(answer);
}
</script>

更新：我更改了代码，如davcs86的回答所示。复选框正常工作，但单击下拉列表时答案未获得更新。我假设因为selectbox jquery没有正常工作。选定=＆＃34;选择＆＃34;单击任何选项后保留在HTML中。因此看起来很难弄清楚在计算中使用哪个数字。我怎样才能让它发挥作用？

<div class="check_main"> 
        <span> 
        <div class="checkbox added" id="checked1"> <input id="chk-drinking" value="1" type="checkbox" checked="checked"> </div> <label>Drinking</label> 
        </span> 
        <span> <div class="checkbox added" id="checked2"> <input id="chk-washing" value="1" type="checkbox" checked="checked"> </div> <label>Washing</label> </span>
        <span> <div class="checkbox added" id="checked3"> <input id="chk-cooking" value="1" type="checkbox" checked="checked"> </div> <label>Cooking</label> </span> 
    </div> 
    <div class="calc_icons"><img src="/wp-content/uploads/calculator-icons.png"></div>
    <div class="calc_step2"> 
        <div class="people center"> <label>People</label> 
            <select tabindex="1" onclose="calc_gallons();" id="calc-num-people" name="calc-num-people"> 
                <option selected="selected" value="1">1</option> 
                <option value="2">2</option> 
                <option value="3">3</option> 
                <option value="4">4</option> 
                <option value="5">5</option> 
                <option value="6">6</option> 
                <option value="7">7</option> 
                <option value="8">8</option> 
                <option value="9">9</option> 
                <option value="10">10</option> 
                <option value="11">11</option> 
                <option value="12">12</option> 
            </select> 
        </div> 
        <div class="cross"> </div> 
        <div class="people center months"> <label>Months</label> 
            <select tabindex="2" onclose="calc_gallons();" id="calc-time"> 
                <option value="30">1</option> 
                <option value="60">2</option> 
                <option selected="selected" value="90">3</option> 
                <option value="120">4</option> 
                <option value="150">5</option> 
                <option value="180">6</option> 
            </select> </div> 
        <div class="cross">  </div> 
        <div class="people center gallons"> <label>Gallons</label> 
            <div class="calc-answer-text">90</div> 
        </div> 
    </div>

Answer 1

正如@Andreas所说。主要问题可能是jquery cdn不包括在内。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 2

为j创建一个jQuery范围，类似于

jQuery.noConflict();
(function(j){
    j(function(){
        //...
    });
})(jQuery);

此外，在jQuery 1.6+之后，您必须在working with checkboxes时使用.prop()。因此，您的代码将是

jQuery.noConflict();
(function(j){
    j(function(){
        j("#calc-num-people").selectbox();
        j("#calc-time").selectbox();
        j('#checked1').click(function(e) {
         if (j('input#chk-drinking').is(':checked')) 
            {
                j('#checked1').removeClass("checkbox added");            
                j('#checked1').addClass("checkbox add1");
                j('input#chk-drinking').prop('checked', false);
            }
            else
            {
                j('#checked1').removeClass("checkbox add1");
                j('#checked1').addClass("checkbox added");
                j('input#chk-drinking').prop('checked',true);      
            }
            calc_gallons();
        });

        j('#checked2').click(function(e) {
         if (j('input#chk-washing').is(':checked')) 
            {
                j('input#chk-washing').prop('checked', false);           
                j('#checked2').removeClass("checkbox added");            
                j('#checked2').addClass("checkbox add1");
            }
            else
            {
                j('input#chk-washing').prop('checked',true);    
                j('#checked2').removeClass("checkbox add1");
                j('#checked2').addClass("checkbox added");
            }
            calc_gallons();
        });

        j('#checked3').click(function(e) {
         if (j('input#chk-cooking').is(':checked')) 
            {
                j('input#chk-cooking').prop('checked', false);           
                j('#checked3').removeClass("checkbox added");            
                j('#checked3').addClass("checkbox add1");
            }
            else
            {
                j('input#chk-cooking').prop('checked',true);             
                j('#checked3').removeClass("checkbox add1");
                j('#checked3').addClass("checkbox added");
            }
            calc_gallons();
        });

        function calc_gallons() {
            var drinking = (j('input#chk-drinking').prop('checked')) ? 1 : 0;
            var washing = (j('input#chk-washing').prop('checked')) ? 1 : 0;
            var cooking = (j('input#chk-cooking').prop('checked')) ? 1 : 0;
            var answer = (j('#calc-num-people').val() * ((drinking * 0.5) + (washing * 0.25) + (cooking * 0.25)) * j('#calc-time').val());
            j('.calc-answer-text').html(answer);
        }
    });
})(jQuery);

<强>更新

由于OP正在使用select-box plugin，因此在选择更改后使用其方法重新计算加仑是必要的。

j("#calc-num-people, #calc-time").selectbox({
  onChange: function (val, inst) {
    calc_gallons();
  }
});

代替，

j("#calc-num-people").selectbox();
j("#calc-time").selectbox();

jQuery Selectbox没有关闭

2 个答案: