jquery 在调整 div 大小后不起作用 onclick

Question

这是一个 jquery 可以根据#outer div 的宽度和高度自动调整文本大小。 如果我在渲染 HTML 之前手动更改#outer div 宽度和高度，那么它的合适文本（自动调整文本大小）正确地调整为#outer div。 就像在示例 1 和示例 2 中看到的一样，其合适的文本。

示例-1

 $.fn.fitInText = function() { this.each(function() { let textbox = $(this); let textboxNode = this; let mutationCallback = function(mutationsList, observer) { if (observer) { observer.disconnect(); } textbox.css('font-size', 0); let desiredHeight = textbox.css('height'); for (i = 12; i < 50; i++) { textbox.css('font-size', i); if (textbox.css('height') > desiredHeight) { textbox.css('font-size', i - 1); break; } } var config = { attributes: true, childList: true, subtree: true, characterData: true }; let newobserver = new MutationObserver(mutationCallback); newobserver.observe(textboxNode, config); }; mutationCallback(); }); } $('#inner').fitInText();

 #outer { display: table; width: 500px; height: 300px; transition: width 1s; } #inner { border: 1px solid black; height: 170px; text-align: center; display: table-cell; vertical-align: middle; word-break: break-all; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="outer"> <div id="inner" contenteditable=true> We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don't have and more on helping you learn how to find the answers within thes is less on answering questions you don't have and mos is less on answering questions you don't have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions. </div> </div>

Example-2 增加#outer div 的宽度和高度，它仍然可以将文本放入#outer

 $.fn.fitInText = function() { this.each(function() { let textbox = $(this); let textboxNode = this; let mutationCallback = function(mutationsList, observer) { if (observer) { observer.disconnect(); } textbox.css('font-size', 0); let desiredHeight = textbox.css('height'); for (i = 12; i < 50; i++) { textbox.css('font-size', i); if (textbox.css('height') > desiredHeight) { textbox.css('font-size', i - 1); break; } } var config = { attributes: true, childList: true, subtree: true, characterData: true }; let newobserver = new MutationObserver(mutationCallback); newobserver.observe(textboxNode, config); }; mutationCallback(); }); } $('#inner').fitInText();

 #outer { display: table; width: 700px; height: 400px; transition: width 1s; } #inner { border: 1px solid black; height: 170px; text-align: center; display: table-cell; vertical-align: middle; word-break: break-all; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="outer"> <div id="inner" contenteditable=true> We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don't have and more on helping you learn how to find the answers within thes is less on answering questions you don't have and mos is less on answering questions you don't have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions. </div> </div>

但是，如果我从 Jquery onclick按钮更改#outer div 宽度和高度比，那么它不会再次更改文本字体大小并且不适合文本到 div。

意味着我想通过button更改#outer div 的宽度和高度，然后它应该可以正常工作，如示例 3 所示，尽管我将onclick="fitInText()"添加到按钮。 . 我想用示例 3 的情况来解决它。

单击按钮后，只需在#outer div 内容中添加任何字母、空格并查看魔术。

 $.fn.fitInText = function() { this.each(function() { let textbox = $(this); let textboxNode = this; let mutationCallback = function(mutationsList, observer) { if (observer) { observer.disconnect(); } textbox.css('font-size', 0); let desiredHeight = textbox.css('height'); for (i = 12; i < 50; i++) { textbox.css('font-size', i); if (textbox.css('height') > desiredHeight) { textbox.css('font-size', i - 1); break; } } var config = { attributes: true, childList: true, subtree: true, characterData: true }; let newobserver = new MutationObserver(mutationCallback); newobserver.observe(textboxNode, config); }; mutationCallback(); }); } $('#inner').fitInText(); //Jquery for change outer div width $('.newsize').on('click', function() { $('#outer').toggleClass('newouter'); });

 #outer { display: table; width: 500px; height: 300px; transition: width 1s; } #outer.newouter { display: table; width: 700px; height: 400px; } #inner { border: 1px solid black; height: 170px; text-align: center; display: table-cell; vertical-align: middle; word-break: break-all; }

 <script src="code.jquery.com/jquery-1.9.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="newsize" onclick="fitInText()"> Change Width Height </button> <div id="outer"> <div id="inner" contenteditable=true> We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don't have and more on helping you learn how to find the answers within thes is less on answering questions you don't have and mos is less on answering questions you don't have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions. </div> </div>

Answer 1

我删除了字体大小调整脚本并在更改长度和宽度时更改了字体大小而不是过渡

这段代码

#outer {
   display: table;
   width: 500px;
   height: 300px;
   transition: all 1s;
}

#outer.newouter {
   display: table;
   width: 700px;
   height: 400px;
}

我用这段代码改变了它

#outer {
  display: table;
  width: 500px;
  height: 300px;
  font-size: 18px;
  transition: all 1.5s;
}

#outer.newouter {
   display: table;
   width: 700px;
   height: 400px;
   font-size: 48px;
}

完整代码：

 //Jquery for change outer div width $('.newsize').on('click', function() { $('#outer').toggleClass('newouter'); });

 #outer { display: table; width: 500px; height: 300px; font-size: 18px; transition: all 1.5s; } #outer.newouter { display: table; width: 700px; height: 400px; font-size: 48px; } #inner { border: 1px solid black; height: 170px; text-align: center; display: table-cell; vertical-align: middle; word-break: break-all; }

 <script src="code.jquery.com/jquery-1.9.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="newsize"> Change Width Height </button> <div id="outer"> <div id="inner" contenteditable=true> We think the Spirit working through the Word, not an expert at the head of the classroom, is essential to discipleship. When we begin here we learn “how to think biblically”. Our focus is less on answering questions you don't have and more on helping you learn how to find the answers within thes is less on answering questions you don't have and mos is less on answering questions you don't have and more on helping you learn how to find the answers within the Bible. We must seek Jesus in the Bible, trusting that God has the answers. This means learning patichurch leadership, but we are available to supply coaches to be to answer questions or suggest next areas to study based on their questions. </div> </div>