Question

我有三种不同的形式，当每个表格填满时，按键“输入”火灾并显示图片。我有两张照片，两张照片同时射击，但是我想要一次按下一次进入，另一只在第二种形式完成时发射，但它们同时发射。

这是我的HTML：

     <!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="Opdracht4_5.js"></script>
    <link rel="stylesheet" href="Opdracht%204_5.css">
    <title></title>

</head>
    <h1 span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
    <form name="form1" onsubmit="validateForm()" method="post">
        <fieldset id="fieldset1">
        <legend>Step 1</legend>
        How many people will be attending?
            <select name = step1 id="step1" onchange="showField()">
            <option value="0">Please Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        <br>
        <div id="divName"></div>
        <img id="check" src="check.png">
        </fieldset> 
    </form>

  <form name="form2" onsubmit="return validateForm()" method="post">
        <fieldset id= "fieldset2">
        <legend>Step 2</legend>
            Would you like your company name on your badges?<br>
            <input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
            <input type="text" id="companyText">
        <br>
        <div id="company"></div>
        Will anyone in your group require special accommodations?<br>
       (if yes) Please explain below:<br>
        <input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
        <input type="text" id="specialText">
            <img id="check2" src="check.png">
        </fieldset>
    </form>

    <form>
        <fieldset id="fieldset3">
    <legend>Step 3</legend>
        I confirm that all provided data is accurate? <br>

        <input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
        </fieldset>
    </form>

</body>     
</html>

这是我的JS：

        function showField(){
    var selectDropDown = $("#step1");
    var value = selectDropDown.val();
    var insertDiv = $("#divName");
    var innerHtmlString = "";
    var value2 = $("#Yes")
    if(value > 0){
        innerHtmlString = "<b>Please provide full names: </b> <br/>";
    }
    for(i = 0; i < value; i++){
        innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
    }
    insertDiv.html(innerHtmlString);
};

$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
        $("#check").show();
    }
});
$(document).on("")

function validateForm(){
    alert("test");
}

$(Document).on("click",function(){

});
$( document ).ready(function() {

    $("#check").hide();
    $("#specialText").hide();
    $("#companyText").hide();
    $("#check2").hide();

    $("#companyYes").on("click", function() {
        $("#companyText").show();
        });
        $("#companyNo").on("click", function() {
        $("#companyText").hide();    
        });
        $("#specialYes").on("click", function() {
        $("#specialText").show();
        });
        $("#specialNo").on("click", function() {
        $("#specialText").hide();
        });
});
$(document).ready();
$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
        $("#check2").show();
    }
});
$(document).on("")

我该如何解决这个问题？

Answer 1

您有两个$(document).on("keypress", function {})个事件应该是一个，您可以检查#check是否可见。如果它不可见，则显示此项，否则显示第二个图像如下。

$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
       if($("#check").is(':visible')) {
          $("#check2").show();
       } else {
         $("#check").show();
       }
    }
});

备注：

你有两个$(document).on("")是无效的，应该是删除（在下面评论）。
Document中的$(Document).on("click",function(){})也是。{ 错了，应该删除。
另外，在您的html中，h1标记未正确关闭，<h1 span class="white">应为<h1> <span class="white">

工作代码：

function showField(){
    var selectDropDown = $("#step1");
    var value = selectDropDown.val();
    var insertDiv = $("#divName");
    var innerHtmlString = "";
    var value2 = $("#Yes")
    if(value > 0){
        innerHtmlString = "<b>Please provide full names: </b> <br/>";
    }
    for(i = 0; i < value; i++){
        innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
    }
    insertDiv.html(innerHtmlString);
};

$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
       if($("#check").is(':visible')) {
          $("#check2").show();
       } else {
         $("#check").show();
       }
    }
});
//$(document).on("")

function validateForm(){
    alert("test");
}

/*$(Document).on("click",function(){

});*/
$( document ).ready(function() {

    $("#check").hide();
    $("#specialText").hide();
    $("#companyText").hide();
    $("#check2").hide();

    $("#companyYes").on("click", function() {
        $("#companyText").show();
        });
        $("#companyNo").on("click", function() {
        $("#companyText").hide();    
        });
        $("#specialYes").on("click", function() {
        $("#specialText").show();
        });
        $("#specialNo").on("click", function() {
        $("#specialText").hide();
        });
});
/*$(document).ready();
$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
        $("#check2").show();
    }
});
$(document).on("")*/

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="Opdracht4_5.js"></script>
    <link rel="stylesheet" href="Opdracht%204_5.css">
    <title></title>

</head>
    <h1> <span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
    <form name="form1" onsubmit="validateForm()" method="post">
        <fieldset id="fieldset1">
        <legend>Step 1</legend>
        How many people will be attending?
            <select name = step1 id="step1" onchange="showField()">
            <option value="0">Please Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        <br>
        <div id="divName"></div>
        <img id="check" src="check.png">
        </fieldset> 
    </form>

  <form name="form2" onsubmit="return validateForm()" method="post">
        <fieldset id= "fieldset2">
        <legend>Step 2</legend>
            Would you like your company name on your badges?<br>
            <input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
            <input type="text" id="companyText">
        <br>
        <div id="company"></div>
        Will anyone in your group require special accommodations?<br>
       (if yes) Please explain below:<br>
        <input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
        <input type="text" id="specialText">
            <img id="check2" src="check.png">
        </fieldset>
    </form>

    <form>
        <fieldset id="fieldset3">
    <legend>Step 3</legend>
        I confirm that all provided data is accurate? <br>

        <input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
        </fieldset>
    </form>

</body>     
</html>

限制JQuery keypress事件同时触发一个？

1 个答案: