Question

在我的网页上我有2个按钮，根据按下的按钮，它们都应该返回不同的“确认”弹出窗口。

代码：

<form action = "markascomplete.php" method = "post" onsubmit = "return validateForm();">

echo '<tr><td><button id = "btnComplete" style = "submit" class = "btn btn-success" name = "btnComplete" value = "btnComplete">Voltooi deze taak</button></td></tr>';
echo '<tr><td><button id = "btnDeComplete" style = "submit" class = "btn btn-danger" name = "btnDeComplete" value = "btnDeComplete">Markeren als onvoltooid</button></td></tr>';

function validateForm()
{
    var btnMark = document.getElementById( 'btnMark' );
    var btnActive = document.getElementById( 'btnActive' );
    var btnComplete = document.getElementById( 'btnComplete' );
    var btnDeComplete = document.getElementById( 'btnDeComplete' );

    alert( btnDeComplete.value );

    var sConfirmText = "";
    var sAlertText = "";

    if( btnMark )
    {
        //alert( btnMark.value );
        sConfirmText = "Test1";
        sAlertText = "Test2";
    }
    else if( btnActive )
    {
        //alert( btnActive.value );
        sConfirmText = "Test3";
        sAlertText = "Test4";
    }
    else if( btnComplete )
    {
        alert( btnComplete.value );
        alert( 'btncomplete' );
        sConfirmText = "Test5";
        sAlertText = "Test6";
    }
    else if( btnDeComplete )
    {
        alert( btnDeComplete.value );
        alert( 'btndecomplete' );
        sConfirmText = "Test7";
        sAlertText = "Test8";
    }

    if( confirm( sConfirmText ) )
    {
        alert( sAlertText );
        return true;
    }
    else
        return false;
}

那么当您按下任何一个按钮时应该会发生什么，它应该给你一个btnDeComplete值的警报，显示两个警告“测试”+已按下的按钮的给定数量。

现在当您按下按钮btnComplete时，您会收到以下警告： btnComplete btncomplete TEST5 TEST6

当您按下按钮btnDeComplete时，您会收到以下警告： btnComplete btncomplete TEST5 TEST6

请注意，它们都是相同的，第一个'alert（btnDeComplete.value）;'返回btnComplete而不是btnDeComplete。我没有在代码中的任何地方更改任何ID或值，我只是在创建按钮时设置id，name和value。

所有其他按钮都可以正常工作。

任何人都可以帮我解决这个问题吗？

Answer 1

我将详细说明一般情况

<form action = "markascomplete.php" id="frmMarks" method = "post">

echo '<tr><td><button id = "btnComplete" style = "submit" class = "btn btn-success btnClick" name = "btnComplete" data-option="Success" value = "btnComplete">Voltooi deze taak</button></td></tr>';
echo '<tr><td><button id = "btnDeComplete" style = "submit" class = "btn btn-danger btnClick" name = "btnDeComplete" data-option="Delete" value = "btnDeComplete">Markeren als onvoltooid</button></td></tr>';

</form>

编辑：

    <script>
     $('.btnClick').on('click',function(){
    var sConfirmText = "";
    var sAlertText = "";
    var sDataOption = $(this).attr("data-option");

if( sDataOption == "btnMark" )
{
    alert( 1 );
    sConfirmText = "1";
    sAlertText = "1";
}
else if( sDataOption == "btnActive" )
{
    alert( 2 );
    sConfirmText = "2";
    sAlertText = "2";
}
else if( sDataOption == "btnComplete" )
{
    alert( 3 );
    sConfirmText = "3";
    sAlertText = "3";
}
else 
{
    alert( 4 );
    sConfirmText = "4";
    sAlertText = "4";
}

if( confirm( sConfirmText ) )
{
    alert( sAlertText );
    $('#frmMarks').submit();
}
else
    return false;
});
    </script>

修改

根据我在粘贴bin链接中看到的内容，您错过了=个else if个else if个符号，我想将您的上一个else语句转换为{{}我在编辑中显示的{1}}语句。检查一下是否有效。另外一个建议是，你可以使用switch个案而不是if else，当你有多项检查要做时，这会更好。

Answer 2

因为你正在运行一系列if条件，所以它在第一个匹配true的代码中运行。它不是在前几个if条件中执行代码，因为那些元素不存在因此btnActive和btnComplete变量为null或false，因此if条件失败并且不执行那些代码。

javascript的顶部只是使用getElement将这些元素（如果它们存在于文档中）分配给变量，并且按下哪个按钮并没有区别，因为它们都调用相同的函数。

在该函数中，您可以使用this.id来获取按下的按钮的id。

希望这会有所帮助：）

html / javascript：按钮的ID正在变化（？）

2 个答案: