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

Question

我一直在尝试做一个设计，需要在输入框中预览图像并玩弄隐藏和显示元素。我已经在这个网站上的某人的帮助下成功地完成了预览图像，现在我一直在尝试使用 JS 解决隐藏和显示元素但无济于事。

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

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

    $(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();
        }
      })
    })

您还可以查看 link 了解更多信息

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

但不知道如何才能return回到我点击复选框之前的状态。

Answer 1

To check the checkbox when click on the orange box, use this below code after the line

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

But don't know how I can make it return to how it was before when I will click on the check box. Use the below code:

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

请在此处参考工作示例https://plnkr.co/edit/5Wy6rNkATY3cbT8v4RWH?p=preview

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

Hide an element on click and show block of elements

javascript

jquery

toggle

show-hide