如何重构该代码以减少重复性？

Question

我对Java语言还很陌生，并且正在研究如何提高效率。我要做的就是确定两组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>