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

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

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

但是我不知道如何让它恢复到我点击复选框之前的状态。使用以下代码：

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

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

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

1 个答案: