Question

我有一个让我疯狂的问题！

我正在使用幻灯片表格逐步订购披萨页面，我的javascript使我可以指定人们可以点击的顶部数量。这是一个没有我网站的工作示例。

这是javascript实际功能：

$(document).ready(function () {
    $("input[name='toppingtypes']").change(function () {
        var maxAllowed = 2;
        var cnt = $("input[name='toppingtypes']:checked").length;
        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('You can select  ' + maxAllowed + ' Toppings');
        }
    });
});

问题是我无法在我的实际页面上运行它。这是我的一些代码的Github存储库。（在index.php上点击比萨按钮）

https://github.com/dhierholzer/onlineordering.git

注意：

Javascript位于索引页面的底部，用于限制可以检查的框数。
我认为这与我的网页上过时的jquery版本有关，但如果我尝试使用更新的jquery代码，网站就会中断。

如果您能找到我无法在复选框表单上运行javscript的原因，请告诉我。

再次感谢，如果您需要更多详细信息，请注意。

Answer 1

你缺少足够的JS导入。如果你打开你的控制台，你会发现有很多“foobar不是一个功能”。

解析器发现错误后，其余代码将不会被执行。

添加

<script type="text/javascript" src="js/jquery.carouFredSel-6.0.6.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js">
</script>

在调用custom.js并从custom.js中的第199行删除外部“$（[...]）”之前

// fred carousel slider
function fredCarouselSlider() {
    //  Responsive layout, resizing the items
    $('.list_carousel').carouFredSel({
    responsive: true,
    auto: true,
    width: '100%',
    prev: '#prev3',
    next: '#next3',
    scroll: 1,
    items: {
    //width: 400,
    //  height: '30%',  //  optionally resize item-height
    visible: {
    min:3,
    max: 3
    }
    }
    });
};

做了这个伎俩。

Answer 2

尝试

$("input[name='toppingtypes']").on('change',function () {
 // do Stuff
});

获取一段Javascript来处理我的Jquery幻灯片表单

2 个答案: