Question

我的彩盒内容存在问题，无法弄清楚如何处理它。而且，我对jQuery不是很熟悉。

我有一个显示常用html内容的Colorbox（它不是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>

这是调用要在colorbox中打印的表单的代码部分

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

Answer 1

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>

page2.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>

试试这个：）

Answer 2

尝试将所有脚本添加到您正在显示colorbox的页面上。

还要查看prop和attr的使用情况，因为attr("checked")在我的浏览器中未定义。

例如

<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>

Answer 3

在同一页面中使用表单的其他解决方案

<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>

颜色框内的jQuery无法正常工作

3 个答案: