Javascript 颜色框内的jQuery不工作_Javascript_Jquery_Html_Opencart

Javascript 颜色框内的jQuery不工作

javascript jquery html opencart

Javascript 颜色框内的jQuery不工作,javascript,jquery,html,opencart,Javascript,Jquery,Html,Opencart,我对colorbox内容有问题，无法确定如何处理它。而且，我对jQuery不是很熟悉我有一个显示常用html内容的颜色框（它不是iframe-d）。在这里，我有一个小脚本，用于根据复选框选择进行计算。此代码在静态页面上运行良好，但在Colorbox中不起作用。我读了有关$.colorbox.element（）的内容，但没有得到它这是我的部分代码，非常感谢您的帮助 <script type="text/javascript"><!-- $('[id^=acc]').click

我对colorbox内容有问题，无法确定如何处理它。而且，我对jQuery不是很熟悉

我有一个显示常用html内容的颜色框（它不是iframe-d）。在这里，我有一个小脚本，用于根据复选框选择进行计算。此代码在静态页面上运行良好，但在Colorbox中不起作用。我读了有关$.colorbox.element（）的内容，但没有得到它

这是我的部分代码，非常感谢您的帮助

<script type="text/javascript"><!--
$('[id^=acc]').click(function() {
    if($(this).attr("checked")) {
        $('‪#‎total‬').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
        $('‪#‎monthly‬').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly')));
    } else {
        $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
        $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly')));
    } 
}); 
//--></script>

<span id="total">0</span> AZN
<span id="monthly">0</span> AZN
<input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/>
<label for="acc1"><span></span>Add to credit</label>


0 AZN
0 AZN
赊账

这是调用表单以在颜色框内打印的代码部分

<script type="text/javascript"><!--
$(function() { 
    $("[id^=onlineCredit]").submit(function() {
        $.post($(this).attr("action"), $(this).serialize(), function(data) {
            $.colorbox({html:data});
        },
        'html');
        return false;
    });
});
//--></script>

page1.html

<span id="total">0</span> AZN
<span id="monthly">0</span> AZN
<input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/>
<label for="acc1"><span></span>Add to credit</label>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $('#acc1').click(function() {
            if($(this).attr("checked")) {
                $('#‎total').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
                $('#‎monthly').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly')));
            } else {
                $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
                $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly')));
            } 
        });
    </script>

0azn
0 AZN
赊账
$（'#acc1'）。单击（函数（）{
if（$（this.attr（“选中”））{
$('#‎total'）.text（parseInt（$（'#total'）.text（））+parseInt（$（this.data（'amount'）））；
$('#‎text（parseInt（$（'#monthly'）.text（））+parseInt（$（this.data（'monthly'）））；
}否则{
$（'#total'）.text（parseInt（$（'#total'）.text（））-parseInt（$（this.data（$）））；
$（'#monthly'）.text（parseInt（$（'#monthly'）.text（））-parseInt（$（this.data（'monthly'）））；
} 
});

页面2.html

<form class="ajax" href="page1.html"> 
     <input  type="submit"/>
</form>

<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(function() {
        $(".ajax").colorbox({width:"50%"});
    });
</script>


尝试将所有脚本添加到正在显示颜色框的页面中
还要查找prop
和attr
的用法，因为attr（“选中”）
在我的浏览器中未定义
比如说
<script>
    $(document).ready(function(){

        $('[id^=acc]').click(function() {

        alert($(this).attr("checked")); -- this doesn't work on my browser
        alert($(this).prop("checked")); -- this does.

        if($(this).attr("checked")) {
            $('‪#‎total‬').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
            $('‪#‎monthly‬').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly')));
        } else {
            $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
            $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly')));
        } 
    });         

       $(function() { 
            $("[id^=onlineCredit]").submit(function() {
                $.post($(this).attr("action"), $(this).serialize(), function(data) {
                    $.colorbox({html:data});
                },
                'html');
                return false;
             });
    });
<\script>


$（文档）.ready（函数（）{
$（'[id^=acc]'）。单击（函数（）{
警报（$（this.attr（“checked”）；--这在我的浏览器上不起作用
警报（$（this）.prop（“选中”）；--确实如此。
if（$（this.attr（“选中”））{
$('‪#‎全部的‬').text（parseInt（$（'#total'）.text（））+parseInt（$（this.data（'amount'）））；
$('‪#‎月刊‬').text（parseInt（$（'#monthly'）.text（））+parseInt（$（this.data（$）））；
}否则{
$（'#total'）.text（parseInt（$（'#total'）.text（））-parseInt（$（this.data（$）））；
$（'#monthly'）.text（parseInt（$（'#monthly'）.text（））-parseInt（$（this.data（'monthly'）））；
} 
});         
$（函数（）{
$（“[id^=onlineCredit]”）。提交（函数（）{
$.post（$（this.attr（“操作”），$（this.serialize（），函数（数据）{
$.colorbox（{html:data}）；
},
"html";；
返回false；
});
});

其他解决方案与表单在同一页中

0 AZN
0 AZN
赊账
错误（控制台）？什么？什么都没有（（问题是此代码在正常页面上完全正常工作），我想这可能是指向这两个跨度（#总计和#每月）的浏览器的问题）实际上是colorbox元素吗？您是否可以显示与colorbox一起使用的代码？为什么不设置一个显示问题的窗口？如果您希望从其他页面html调用表单，可以。请参阅此处，colorbox在表单提交后打开。我猜$.colorbox（{html:data}）我不应该调用它。我应该考虑将类型更改为内联或IFRAME…但是这将影响我的所有项目（（您想在表单提交后打开colorbox？如果您想在表单提交后打开colorbox，请更改page2.html中的链接，我已检查了那些page1和page2 html文件。出现加载错误..仍在搜索解决方案，但未成功。）(（我猜浏览器无法识别colorbox中的“点击”复选框出现colorbox
后，我会查看页面的viewSource，并检查已呈现的内容，这可能有助于您发现为什么它不能按预期工作。
<a id="inline" href="#myForm">myForm</a>
<form id="myForm" style="display:none">
    <span id="total">0</span> AZN
    <span id="monthly">0</span> AZN
    <input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/>
    <label for="acc1"><span></span>Add to credit</label>
    <input  type="submit"/>
</form>
<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(function() {
        $("#inline").click(function(){
            $("#myForm").css("display","inline");
        }).colorbox({inline:true, href:"#myForm",width:"50%",
                        onClosed:function(){
                                    $("#myForm").css("display","none");
                                }
                    });
    });
    $('#acc1').click(function() {
        if($(this).attr("checked")) {
            $('#‎total').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
            $('#‎monthly').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly')));
        } else {
            $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
            $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly')));
        } 
    });
</script>