javascript - 检查页面加载时的输入字段并使用 jquery 进行操作

Question

当我按 ADD 时，我显示 hidden #box，我隐藏 ADD 按钮并显示 REMOVE 按钮。

html:

<input type="button" id="add" value="ADD">
<input type="button" class="no-display" id="remove" value="REMOVE">

<div class="no-display" id="box">
    <input id="a" value="" type="text" />
    <input id="b" value="" type="text" />
    <input id="c" value="" type="text" />
</div>

jQuery：

$('#add,#remove').click(function () {
    $('#add').toggle();
    $('#remove').toggle();
    $('#box').slideToggle("fast");
});

见工作演示

现在，我想检查输入字段#aor#b是否#c有值。如果它们有值，则在我要显示的页面加载时#box，隐藏#add按钮并显示#remove按钮。

做这个的最好方式是什么？

你可以在这里看到一个演示（未完成）

Answer 1

用于filter()获取具有值的输入的计数...如果计数大于 0 ..意味着至少一个输入不为空，所以..隐藏添加、显示删除按钮和容器

尝试这个

$('#add,#remove').click(function () {
  $('#add').toggle();
  $('#remove').toggle();
  $('#box').slideToggle("fast");
});

var count = $('#a,#b,#c').filter(function () {
  return $(this).val().length > 0;
}).length;

if (count > 0) {
  $('#box').show();
  $('#add').hide();
  $('#remove').show();
}

根据评论更新

var count = $('#a,#b,#c').filter(function () {
  return this.value.length > 0; //faster 
}).length;    

工作小提琴

Answer 2

试试这个：将切换代码移动到函数中。将其绑定到点击。如果任何输入有值，则在加载时调用它。

$(function () {
  var toggleBox = function () {
    $('#add').toggle();
    $('#remove').toggle();
    $('#box').slideToggle("fast");
  };

  $('#add,#remove').click(toggleBox);
  if(!!$("#a, #b, #c").filter(function() {return this.value;}).length) {
    toggleBox();
  }
});