jQuery选择框不关闭

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 的答案所示。复选框正在工作，但单击下拉菜单时答案未更新。我假设是因为选择框 jquery 无法正常工作。单击任何选项后， selected="selected" 会保留在 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

为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();

Answer 2

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

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