javascript - 用户单击元素时如何切换脚本的 src 属性？

Question

我在我的 Django 元素中使用 bootstrap 3.3.7。我有模态 <textarea> .在 Angular 落的那个文本区域内，我放了一个图标。下面是我的文本区域的图片。 当用户单击该图标时，我将文本区域大小更改为浏览器的全屏。另外，我使用 autosize我的 textarea 上的插件可调整 textarea 的高度以适合文本。

在正常情况下(当textarea很小的时候)我需要使用autosize插件。当我单击图标并将文本区域更改为全屏时，我不需要使用此插件。

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

P.S. 当 textarea 处于全尺寸模式时，我与 autosize 插件几乎没有冲突。因为当我开始以全尺寸模式在 textarea 中书写时，autosize 插件改变了它的高度。这就是为什么我想在文本区域处于全屏模式时取消此插件。

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() (即在“点击”事件中，当您更改文本区域行为时)。基本上它应该禁用在您的文本区域上工作的插件。

(次要旁注)除此之外，我会投票赞成在 textarea 周围的包装器中添加一些特定的类，然后根据该类调整 css，这样您就可以避免在“点击”功能中对 DOM 进行一些查询。