0

我已经使用 HTML 和 jQuery 构建了一个表单。该表单旨在为用户即时生成报价。

我还希望使用 jQuery iPhone Style Checkboxes (iSC) 设置样式的复选框。

我已经实现了 jQuery Price Calculator Pro (PCP) 以及 iSC。当 iSC 未实施时，系统可以完美运行，但是一旦实施 iSC，价格变化（见右上角）将不再触发。

我认为这是因为事件是由 .click 触发的，但据我发现并非如此。

我已经能够实现以下内容，这将允许我添加一行代码来触发 PCP 运行所需的任何内容：

$(window).load(function() {             

var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
    onChange: function() { 
            if ($('#eCommerce').is(':checked')) {
                $('#eCommerce-Output').removeClass('dispnone');
                console.log('eCommerce is on');
        } 
            else { 
            $('#eCommerce-Output').addClass('dispnone');
            console.log('eCommerce is off');
            };
    }
});

正如您将能够通过控制台在页面的实时版本上看到的那样——当 iPhone 切换开关切换时，上述触发完美。

如果您勾选顶部的无样式复选框，您将能够看到我希望 iPhone 切换执行的操作。可以在此处找到用于计算的相关 .js 文件。

非常感谢任何和所有帮助。

4

2 回答 2

2

每次触发表单输入之一的更改事件时，价格都会更新。所以我们需要在iphone风格的checkbox改变的时候手动触发这个事件。

编辑： iPhone Style Checkboxes 实际上将复选框元素作为第一个参数传递给 onChange 函数。this 关键字不会按预期工作。我已经相应地更新了我的答案。

var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
    onChange: function(input) { 
        input.trigger('change');
    }
});

我希望这有帮助！

本。

于 2012-09-27T05:08:04.020 回答
0

检查小部件化的 DOM 使我相信以下内容应该有效：

$(function() {             
    var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
        onChange: function() { 
            $(this).closest('.iPhoneCheckContainer').find('input').trigger('change');
        }
    });
});

如果可行，这将是“onChange”处理程序的通用解决方案：

  • 不对元素 ID 做任何假设
  • 相对于单击的小部件工作，以查找创建小部件（并且仍然存在）的底层输入元素（复选框/单选按钮），并触发其更改事件。
于 2012-09-27T08:53:31.153 回答