javascript - 使用 jQuery 检查多个提交按钮的问题

标签 javascript jquery

我正在尝试使用 jQuery 1.7.2 检查按下了四个提交按钮中的哪一个。如果单击其中三个按钮中的任何一个,我想显示一个带有按钮值的警告框。这是 html 代码:

<body>
    <table>
        <tr>
            <td>
                <input type="submit" id="cancel" value="Cancel">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" id="find" value="Find">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" id="save" value="Save">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" id="update" value="Update">
            </td>
        </tr>
    </table>
</body>

这是 jQuery 函数代码:

<script>
        $(function(){
            $(':submit').click(function(){
                var value = $(this).val();
                //alert(value);

                if($(this).val() == "Save" || "Find" || "Clear") {
                //if($(this).val() == "Update") {
                    alert('The value is: ' + value);
                }
            });
        });
    </script>

如果我单击三个按钮中的任何一个,我都会显示该值,但如果我随后单击“更新”按钮,它也会显示。我以为我的 if block 会阻止这种情况发生?

如果我注释掉该行并改为使用此代码:

if($(this).val() == "Update") {
                        alert('The value is: ' + value);
                    }

只有当我点击“更新”按钮时才会触发警报。当我检查多个提交按钮时,这里的代码有什么问题?

最佳答案

您的 if 语句不正确:

if( $(this).val() == "Save" || "Find" || "Clear" )

虽然运算符通常被认为是这样工作的,但它并不是这样工作的。如果您想测试该值是否等于这些字符串之一,您应该改用 $.inArray:

if ( $.inArray( $(this).val(), [ "Save", "Find", "Clear" ] ) > -1 );

额外学分

作为一点额外的功劳,|| 运算符计算两个表达式(一个在它的左边,一个在它的右边)并计算为 true 如果两个表达式中的任何一个是真实的

if ( true || false ) // Evalutes to true, since one of the two was true

在您的尝试中,您想要查看该值是否等于这些字符串中的任何一个。如果您想使用 ||,则必须创建多个比较:

var myVal = $(this).val();
if ( ( myVal == "Save" ) || ( myVal == "Find" ) || ( myVal == "Clear" ) )

如果满足任何条件,此条件将评估为 true。您可以看到这将如何很快变得相当冗长。

关于javascript - 使用 jQuery 检查多个提交按钮的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10771750/

相关文章:

javascript - jQuery 悬停问题 - 最后一个 li 元素保持悬停

javascript - prop 的默认类型取决于另一个 prop 的值

javascript - 如何使隐藏的元素更快地弹出(jquery/css)

javascript - Jquery 选择行为在 IE 上有所不同

javascript - 如何在react js中获取Select Box(这是一个组件)的值?

javascript - Bootstrap 日期选择器不关闭

javascript - 使用jquery或纯javascript从今天日期到每年特定日期的倒计时天数

javascript - 如何在点击时显示警报/弹出窗口?

javascript - jQuery .On() 不使用从对象传递的参数触发

javascript - React Native - 剪贴板变化的监听器