单击时隐藏元素并显示元素块

Question

我一直在尝试做一个设计，它需要在输入框中预览图像并围绕隐藏和显示元素进行游戏。在本站某人的帮助下，我已成功完成预览图像，现在我一直在尝试使用 JS 解决隐藏和显示元素，但无济于事。

让我解释一下我的问题，我有六个主盒子和一个橙色盒子。但我只想在表单上显示 3 个框并隐藏其他 3 个框，这样每当用户单击橙色框时，它就会显示 3 个隐藏框并隐藏自身并显示一个将被标记或选中的复选框。例如，当有人取消选中该复选框时，它会像以前一样返回。

我试过这样做，这是我的脚本

    $(function() {
      var count = 0;
      $('.upload-img').on('change', function(evt) {
        var file = evt.target.files[0];
        var _this = evt.target;
        $(this).parent('.upload-section').hide();
        var reader = new FileReader();
        reader.onload = function(e) {
          var span = '<img class="thumb mrm mts" src="' + e.target.result + '" title="' + escape(file.name) + '"/><span class="remove_img_preview"></span>';
          $(_this).parent('.upload-section').next().append($(span));
        };
        reader.readAsDataURL(file);
        evt.target.value = "";
      });

      $('.preview-section').on('click', '.remove_img_preview', function() {
        $(this).parent('.preview-section').prev().show();
        $(this).parent('.preview-section').remove();
      });
    });

    $(function(){
      var answer = $(".answer");
      var clickable = $(".clickable");
      answer.hide()
      $(".file_container-orange").on("click", function(){
        $(this).hide()
        if(!answer.is(":visible")){
          answer.show().addClass("clickable")
        }else{
          answer.hide();
        }
      })
      //EXTRA:: makes the button and answer toggle on click
      $("body").on("click", ".clickable", function(){
        $(this).hide();
        if(!answer.is(":visible")){
          $(".file_container-orange").show();
        }
      })
    })

您也可以查看链接并查看更多内容

https://plnkr.co/edit/jtUvlq4lClyfFHrFmzzO?p=preview

但不知道如何才能让它恢复到之前的状态，然后单击复选框。

Answer 1

1. 要在单击橙色框时选中复选框，请在行后使用以下代码

answer.show().addClass("clickable")
$("[type='checkbox']").prop("checked", "checked")

1. 但不知道如何才能让它恢复到之前的状态，然后单击复选框。使用以下代码：

$("body").on("change", "[type='checkbox']", function() {
  if (!$(this).prop("checked")) {
    answer.hide();
    $(".file_container-orange").show();
  }
})

请参考这里的工作示例https://plnkr.co/edit/5Wy6rNkATY3cbT8v4RWH?p=preview