Question

我写了一个学校项目的代码已经被困了几天。这是我的代码：

**HTML**
 <fieldset id="step1">
<legend>Step 1</legend>
<p1>How many people will be attending?</p1>
 <div id="selected_form_code">
 <select id="select_btn">
 <option value="0">Please choose</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 </select>
  <div class="Attendees" id="form1">
      <h2 id="infoNames">Please provide full names:</h2>
      <form action="#" id="form_submit" method="post" name="form_submit">
          <div class="Attendees" id="Attendee1" name="a">
              <label>
                  Attendee 1 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee2" name="b">
              <label>
                  Attendee 2 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee3" name="c">
              <label>
                  Attendee 3 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee4" name="d">
              <label>
                  Attendee 4 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee5" name="e">
              <label>
                  Attendee 5 name:
                  <input>
              </label>
          </div>

     </form>
  </div>
 </div>

 <p class="vinkje"><img src="vinkje.png" height="100" width="100"></p>
 </fieldset>

这是一个选择器，它将下拉表单作为您选择的输入。但是现在我必须在填写所有这些输入时得到一个图像。这是我的jq代码：

function checkInput() {
if (!$('Attendee1').val())
    $('.vinkje').hide();
}

这是我用于下拉菜单的代码，您可以在其中选择要追加的表单数量

$(document).ready(function() {
var isEmpty = true;
$('.vinkje').hide();
hideInput();
$('#select_btn').change(function() {
    hideInput();
    var sel_value = $('option:selected').val();
    if (sel_value == 0) {
        hideInput();
    } else {
        $("#infoNames").show();
        for (var i = 1; i <= sel_value; i++) {
            $("#Attendee" + i).show();
        }
    }
    checkInput();
});

$('.Attendees input').blur(function()
{
    checkInput();
});


});

Answer 1

为keyup

内的输入为form事件创建事件处理程序

$("form input").on( "change keyup", function(){

  $(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set    

  $('.vinkje').toggle( $("form input[data-hasvalue='true']").length > 0 ); //if there is even one input with value, show the image

});

修改

如果您只想在填写所有输入时显示图像，请将其更改为

$("form input").on( "change keyup", function(){ $(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set $('.vinkje').toggle( $("form input[data-hasvalue='true']").length == $("form input").length ); //if there is even one input with value, show the image });

Answer 2

此处是您需要的更新代码。以下代码所做的更改是：

默认情况下隐藏了图像（使用CSS：display：none;）
填写所有输入字段后，只显示图像
如果清除任何字段，则使用JQuery再次隐藏图像

希望，这有帮助。

＆＃13;

$(document).ready(function() {
  $(".Attendees > :input").keyup(function() {
    var $emptyFields = $('.Attendees :input').filter(function() {
      return $.trim(this.value) === "";
    });

    if (!$emptyFields.length) {
      $(".vinkje").show();
    } else {
      $(".vinkje").hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="step1">
  <legend>Step 1</legend>
  <p1>How many people will be attending?</p1>
  <div id="selected_form_code">
    <select id="select_btn">
 <option value="0">Please choose</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 </select>
    <div class="Attendees" id="form1">
      <h2 id="infoNames">Please provide full names:</h2>
      <form action="#" id="form_submit" method="post" name="form_submit">
        <div class="Attendees" id="Attendee1" name="a">
          <label>
                  Attendee 1 name:
          </label>
          <input type="text"> 
        </div>
        <div class="Attendees" id="Attendee1" name="a">
          <label>
                  Attendee 2 name:
          </label>
          <input type="text"> 
        </div>
        <div class="Attendees" id="Attendee1" name="a">
          <label>
                  Attendee 3 name:
          </label>
          <input type="text"> 
        </div>

      </form>
    </div>
  </div>

  <p class="vinkje" style="display:none"><img src="https://image.flaticon.com/teams/slug/freepik.jpg" height="100" width="100"></p>
</fieldset>

＆＃13;

注 - （从5个字段更新为3个字段）

图像应显示在

2 个答案: