Question

我在Django项目中使用bootstrap 3.3.7。我有<textarea>的模态。在角落里面的textarea我放了一个图标。下面是我的textarea的照片。当用户单击图标时，我将textarea大小更改为浏览器的全屏。另外，我在textarea上使用autosize插件调整textarea的高度以适应文本。

在正常情况下（当textarea很小时）我需要使用autosize插件。当我点击图标并将textarea更改为全屏时，我不需要使用此插件。

问题：点击图标后如何设置脚本的 src 属性？

P.S。当textarea处于全尺寸模式时，我与autosize插件几乎没有冲突。因为当我开始在全尺寸模式下写textarea时，autosize插件会改变它的高度。这就是为什么我想在全屏模式下的textarea时取消这个插件。

autosize(document.querySelectorAll('#body')); // Autosize for textarea with "body" id

$('.textarea-icon').click(function() {
  $(".textarea-icon").toggleClass("fa-expand fa-compress")
  $(".textarea-wrapper").toggleClass('textarea-wrapper-fullscreen')
  $("#body").toggleClass('textarea-fullscreen')
  $(".modal-dialog").toggleClass('modal-dialog-fullscreen')
  $(".textarea-icon").toggleClass('textarea-icon-fullscreen')
});

.dashboard-wrapper {
  position: relative;
}

#dashboard-content {
  float: right;
  width: 100%;
  margin-top: 51px;
}

.textarea-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.textarea-wrap .textarea-icon {
  position: absolute;
  top: 3px;
  right: 3px;
  color: #BDBDBD;
  text-decoration: none;
  font-size: 17px;
  outline: none;
  cursor: pointer
}

.textarea-wrap .textarea-icon:hover {
  color: #757575;
  outline: none;
}

.textarea-wrap.textarea-wrap-fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.textarea-wrap textarea.textarea-fullscreen {
  margin-bottom: 30px;
  overflow-x: hidden;
  overflow-wrap: break-word;
  height: 100vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autosize@4.0.0/dist/autosize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dashboard-wrapper">
  <div id="dashboard-content">
    <div class="modal fade">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form method="post" action="">
            <div class="form-group">
              <label for="body">Discription</label>
              <div class="textarea-wrapper">
                <textarea name="body" class="form-control" id="body"></textarea>
                <i class="fa fa-arrows textarea-icon" aria-hidden="true"></i>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script id="" src="{% static 'js/autosize.js'%}"></script>

修改：

autosize(document.querySelectorAll('#body')); // Autosize to textarea

$('.textarea-wrapper .fa-expand').click(function() {
    autosize.destroy(document.querySelectorAll('#body')); // Destroy Autosize to textarea when user click icon
});

$('.textarea-icon').click(function() {
   $(".textarea-icon").toggleClass("fa-expand fa-compress") // Change Icon Picture
   $(this).closest('.textarea-wrapper').toggleClass('fullscreen') // Change textarea size
});

$('.textarea-wrapper .fa-compress').click(function() { // DONT WORK
   autosize(document.querySelectorAll('#body'));
})

Answer 1

如果我理解你正确，你只需要在放大它时在相应元素上使用autosize.destroy（）（即在“click”事件中，当你改变textarea行为时）。基本上它应该禁用你的textarea上的插件。

（次要评论）除此之外，我会投票给textarea周围的包装器添加一些特定的类，然后根据该类调整css，这样你就可以避免在“click”函数中对DOM进行一些查询。

如何在用户点击元素时切换脚本的src属性？

1 个答案: