jQuery - On change with multiple conditions

Question

我想隐藏所有已提交的项目，以模拟仅显示当前需要上传的项目(隐藏存档项目)。

我只想让项目show/hide取决于复选框是否被选中。

我需要:如果一个文件是上传和提交是按->，如果复选框是选中->，隐藏已提交的项目。如果在上传文件并按下提交时未选中该复选框，则在某个时刻选中该复选框之前，不要隐藏该项目。

​

function count() {
  var x = $(".item:not(.archive)").length;
  $("#count").text(x);
}
count();
$("#state").change(function() {
  if (this.checked) {
    if ($(".item").hasClass("archive")) {
      $(".item.archive").addClass("hidden");
    }
  } else {
    $(".item.archive").removeClass("hidden");
  }
});
$(document).on("click", "button", function(e) {
  var $uploader = $(this).closest(".item").find("input");
  if ($uploader.val() !== "") {
    e.preventDefault();
    $(this).css("background-color", "#4dcb83");
    $(this).html("Archived");
    $(this).closest(".item").addClass("hidden");
    $(this).closest(".item").addClass("archive");
    $uploader.val("");
    count();
  }
});

.item {
  display: flex;
  width: 500px;
  padding: 1.3rem;
  border: 1px solid;
}

.item.hidden {
  display: none;
}

.top {
  display: flex;
  padding: 0 12px 12px
}

#count {
  margin-left: 6px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  outstanding:
  <div id="count">0</div>
</div>
<label for="state">
  <input id="state" type="checkbox">
  Hide Archived?
</label>
<div class="list">
  <div class="item">
    <input type="file">
    <button>Submit</button>
  </div>
  <div class="item">
    <input type="file">
    <button>Submit</button>
  </div>
</div>

​

Answer 1

我能够通过创建一个函数来处理项的状态并在提交项时调用它来解决这个问题。

在这个函数中，我检查项目是否被赋予了存档类，并找到了复选框的状态。

​

function archive() {
  var x = $(".item:not(.archive)").length;
  $("#count").text(x);
  if ($(".item").hasClass("archive") && $("#state").is(":checked")) {
    $(".item.archive").addClass("hidden");
  }
  $("#state").change(function () {
    if (this.checked) {
      if ($(".item").hasClass("archive")) {
        $(".item.archive").addClass("hidden");
      }
    } else {
      $(".item.archive").removeClass("hidden");
    }
  });
}
archive();
$(document).on("click", "button", function (e) {
  var $uploader = $(this).closest(".item").find("input");
  if ($uploader.val() !== "") {
    e.preventDefault();
    $(this).css("background-color", "#4dcb83");
    $(this).html("Sent");

    $(this).closest(".item").addClass("archive");
    $uploader.val("");
    archive();
  }
});

.item {
  display: flex;
  width: 500px;
  padding: 1.3rem;
  border: 1px solid;
}

.item.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="count">0</div>
<label for="state">
  <input id="state" type="checkbox" checked>
  Hide?
</label>
<div class="list">
  <div class="item">
    <input type="file">
    <button>Submit</button>
  </div>
  <div class="item">
    <input type="file">
    <button>Submit</button>
  </div>
</div>

​