Question

我试图在jQuery中定位子元素，根据是否有任何输入进行更改。但是，此代码存在一些问题。首先，即使我已经指定了CSS，对点击的CSS效果也不适用于textarea。

其次，填入输入字段仍然会将变量truth返回为false，因此它不会执行$('p').html('Solid')下面的代码。

我的HTML：

<div id="section">
    <button>Click It</button>
    <label>
        <input type="text" required="true" />
    </label>
    <label>
        <input type="text" />
    </label>
    <textarea required="true"></textarea>
</div>
<p></p>

$('button').click(function(){
    var truth = true;
    $('#section label').each(function(){
        var chooseinputs = $(this).find('input[required=true], textarea[required=true]');
        if ( !$.trim(chooseinputs.val()) ){
            $(chooseinputs).css('border', '1px solid red');
            $('p').html("Empty");
            truth = false;
        }
        if (truth)
            $('p').html("Solid!");
    });
});

JSFiddle

Answer 1

你只是检查第一个输入，你需要一个foreach

$('button').click(function() {
  var truth = true;
  $('#section label> input[required=true], textarea[required=true]').each(function() {
    
    if (!$.trim($(this).val())) {
      $(this).css('border', '1px solid red');
      $('p').html("Empty");
      truth = false;
    }
    if (truth) {
      $('p').html("Solid!");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="section">
  <button>Click It</button>
  <label>
    <input type="text" required="true" />
  </label>
  <label>
    <input type="text" />
  </label>
  <textarea required="true"></textarea>
</div>
<p></p>

jQuery使用子元素更改变量

1 个答案: