jQuery没有改变警报消息

Question

我正在制作小费计算器，一切正常，但如果选择了不同的等级，jQuery不会更改公式;例如，贫穷，善良，伟大..

jsFiddle演示 :: http://jsfiddle.net/MatthewKosloski/g7vAQ/1/

        $('#tip').on('click', function(){

            if($('#poor').click && $('#amount').val().length){

                var theAmountVal = $('#amount').val();

                    alert(theAmountVal * .10);

            } else if($('#good').click && $('#amount').val().length){

                var theAmountVal = $('#amount').val();

                    alert(theAmountVal * .15);

            } else if($('#great').click && $('#amount').val().length){

                var theAmountVal = $('#amount').val();

                    alert(theAmountVal * .20);

            } else {

                    alert("An error has occured.");

            }

Answer 1

那不是.click的工作方式......

.click是触发点击或添加事件绑定的函数。

你应该尝试这个条件（x3适用于其他元素）：

if($('#poor').hasClass('active-state')&& $('#amount').val().length)

.hasClass将检查它是否有类并返回true或false。

以下是.hasClass()的文档：http://api.jquery.com/hasClass/

另外，如果我可以给你一个建议，你可以在这样的自定义属性中添加因子：

<h1 id="poor" data-factor='.10' data-clicked="false">Poor</h1>
<h1 id="good" data-factor='.15' data-clicked="false">Good</h1>
<h1 id="great" data-factor='.20' data-clicked="false">Great</h1>

并将代码缩减为：

$('h1').on('click', function () {
    $(this).addClass('active-state').siblings('h1').removeClass('active-state');
});

$('#tip').on('click', function(){
    if($('.active-state').length && $('#amount').val().length){
        var theAmountVal = $('#amount').val();
        alert(theAmountVal * $('.active-state').data('factor'));
    }

});

小提琴：http://jsfiddle.net/g7vAQ/5/

Answer 2

这是一个建议：
的 Demo here

var choice;
$('h1').on('click', function () {
    choice = this.id;
    $(this).addClass('active-state').siblings('h1').removeClass('active-state');
});
$('#tip').on('click', function () {
    if (choice == 'poor' && $('#amount').val().length) {
        var theAmountVal = $('#amount').val();
        alert(theAmountVal * .10);
    } else if (choice == 'good' && $('#amount').val().length) {
        var theAmountVal = $('#amount').val();
            alert(theAmountVal * .15);
    } else if (choice == 'great' && $('#amount').val().length) {
            var theAmountVal = $('#amount').val();
        alert(theAmountVal * .20);
    } else {
        alert("An error has occured.");
    }
});

我获得了点击选项的id并将其存储在variable中，然后我使用了您的代码并重新检查了id语句中的if。

Answer 3

试试这个：

jQuery(document).ready(function () {
var theAmountVal=0;

        jQuery('#tip').onclick(function(){

            if($('#poor').click && $('#amount').val().length){

                theAmountVal = $('#amount').val();

                    alert(parseInt(theAmountVal)* .10);

            } else if($('#good').click && $('#amount').val().length){

                theAmountVal = $('#amount').val();

                    alert(parseInt(theAmountVal)* .15);

            } else if($('#great').click && $('#amount').val().length){

                theAmountVal = $('#amount').val();

                    alert(parseInt(theAmountVal)* .20);

            } else {

                    alert("An error has occured.");

            }

});

并删除此$('#good').click代码，将其替换为其他内容。 .Click - 是事件，不能在IF..ELSE结构中使用