如何重構此代碼以減少重復？

Question

我對 Javascript 還很陌生，正在研究如何提高效率。 我需要做的就是確定兩組 div 的高度，包括它們的邊距，然后將此高度應用於整個容器。 這必須應用於兩個單獨的 div。 我基本上已經編寫了兩次代碼，而不是使用諸如 forEach 之類的函數（我不確定這里是否適用）。 我確信有一種方法可以顯着減少這種情況，但我似乎找不到解決方案。

 var container = document.querySelectorAll('#agent_1, #agent_2'); var content = document.querySelectorAll('#content_1, #content_2'); // Agent 1 divs var topInclusiveA1 = content[0].children[0].offsetHeight + content[0].children[1].offsetHeight + parseInt(window.getComputedStyle(content[0].children[0], null).getPropertyValue('margin-bottom')) + parseInt(window.getComputedStyle(content[0].children[1], null).getPropertyValue('margin-bottom')); var bottomInclusiveA1 = content[0].children[2].offsetHeight + content[0].children[3].offsetHeight + parseInt(window.getComputedStyle(content[0].children[2], null).getPropertyValue('margin-bottom')) + parseInt(window.getComputedStyle(content[0].children[3], null).getPropertyValue('margin-bottom')); // Agent 2 divs var topInclusiveA2 = content[1].children[0].offsetHeight + content[1].children[1].offsetHeight + parseInt(window.getComputedStyle(content[1].children[0], null).getPropertyValue('margin-bottom')) + parseInt(window.getComputedStyle(content[1].children[1], null).getPropertyValue('margin-bottom')); var bottomInclusiveA2 = content[1].children[2].offsetHeight + content[1].children[3].offsetHeight + parseInt(window.getComputedStyle(content[1].children[2], null).getPropertyValue('margin-bottom')) + parseInt(window.getComputedStyle(content[1].children[3], null).getPropertyValue('margin-bottom')) // AGENT 1 // Set max height to Div 1 + 2 content[0].style.maxHeight = topInclusiveA1 + 'px'; // Functions when hovered function mouseOverA1(){ content[0].style.maxHeight = (topInclusiveA1 + bottomInclusiveA1) + 'px'; }; function mouseOutA1(){ content[0].style.maxHeight = topInclusiveA1 + 'px'; }; // AGENT 2 // Set max height to div 0 + 1 content[1].style.maxHeight = topInclusiveA2 + 'px'; // Functions when hovered function mouseOverA2(){ content[1].style.maxHeight = (topInclusiveA2 + bottomInclusiveA2) + 'px'; }; function mouseOutA2(){ content[1].style.maxHeight = topInclusiveA2 + 'px'; }; // Add event listeners container[0].addEventListener('mouseover', mouseOverA1); container[0].addEventListener('mouseout', mouseOutA1); container[1].addEventListener('mouseover', mouseOverA2); container[1].addEventListener('mouseout', mouseOutA2);

 <div class="container-fluid agent-bg"> <div class="container"> <div class="row pt-5 pb-5"> <div id="agent_1" class="col-sm-4 p-0 mr-5 agent"> <div class="agent-photo"> <img src="img/agent.jpg"> </div> <div id="content_2" class="content px-3"> <h1>Agent Name</h1> <h2>Agent Title</h2> <h3>Agent Phone</h3> <h4>Agent Email</h4> </div> </div> <div id="agent_2" class="col-sm-4 p-0 mr-5 agent"> <div class="agent-photo"> <img src="img/agent.jpg"> </div> <div id="content_2" class="content px-3"> <h1>Agent Name</h1> <h2>Agent Title</h2> <h3>Agent Phone</h3> <h4>Agent Email</h4> </div> </div> </div> </div> </div>

任何幫助，將不勝感激。

Answer 1

這不是最簡單的答案。 可以通過創建一個代理“類”來進一步簡化。 絕對是一個更好的研究方法。

邊注：

考慮使用 ES6 引入的作用域變量（例如let或const ）。 它們絕對是更好的方法（而不是var ），但是在您的代碼中使用它們之前，您應該確保目標瀏覽器支持它們。

我不確定使用var是否是有意的選擇，但我想如果您不熟悉 JS，我會提到它。

 var container = document.querySelectorAll('#agent_1, #agent_2'); var content = document.querySelectorAll('#content_1, #content_2'); function inclusive(contentIndex, childIndex1, childIndex2) { return content[contentIndex].children[childIndex1].offsetHeight + content[contentIndex].children[childIndex2].offsetHeight + parseInt(window.getComputedStyle(content[contentIndex].children[childIndex1], null).getPropertyValue('margin-bottom')) + parseInt(window.getComputedStyle(content[contentIndex].children[childIndex2], null).getPropertyValue('margin-bottom')); } function mouseOver(contentIndex, topInclusive, bottomInclusive) { return function() { content[contentIndex].style.maxHeight = (topInclusive + bottomInclusive) + 'px'; } } function mouseOut(contentIndex, topInclusive) { return function() { content[contentIndex].style.maxHeight = topInclusive + 'px'; } } // Agent 1 var topInclusiveA1 = inclusive(0, 0, 1); var bottomInclusiveA1 = inclusive(0, 2, 3); var mouseOverA1 = mouseOver(0, topInclusiveA1, bottomInclusiveA1); var mouseOutA1 = mouseOut(0, topInclusiveA1); // Agent 2 divs var topInclusiveA2 = inclusive(1, 0, 1); var bottomInclusiveA2 = inclusive(1, 2, 3); var mouseOverA2 = mouseOver(1, topInclusiveA2, bottomInclusiveA2); var mouseOutA2 = mouseOut(1, topInclusiveA2); // Set Defaults mouseOutA1(); mouseOutA2(); // Add event listeners container[0].addEventListener('mouseover', mouseOverA1); container[0].addEventListener('mouseout', mouseOutA1); container[1].addEventListener('mouseover', mouseOverA2); container[1].addEventListener('mouseout', mouseOutA2);

 <div class="container-fluid agent-bg"> <div class="container"> <div class="row pt-5 pb-5"> <div id="agent_1" class="col-sm-4 p-0 mr-5 agent"> <div class="agent-photo"> <img src="img/agent.jpg"> </div> <div id="content_2" class="content px-3"> <h1>Agent Name</h1> <h2>Agent Title</h2> <h3>Agent Phone</h3> <h4>Agent Email</h4> </div> </div> <div id="agent_2" class="col-sm-4 p-0 mr-5 agent"> <div class="agent-photo"> <img src="img/agent.jpg"> </div> <div id="content_2" class="content px-3"> <h1>Agent Name</h1> <h2>Agent Title</h2> <h3>Agent Phone</h3> <h4>Agent Email</h4> </div> </div> </div> </div> </div>