如何仅通过更改数字来优化这些可重复的 Javascript 代码集答案

【问题标题】：How do I optimize these set of repeatable Javascript code with just number changes如何仅通过更改数字来优化这些可重复的 Javascript 代码集
【发布时间】：2020-11-20 12:08:49
【问题描述】：

我有一组可重复且类似的代码来打开和关闭几个模态。模态的数量可以多达一百个，因为它们将通过 cms 生成，并且我已经对其进行了编程，以使用 ids 来调用具有自己独特内容的每个模态。这些模式在单击文本或锚链接时打开，并在单击背景或关闭按钮时关闭。用于标记文本、锚链接和模态的 id 都相似，只是它们的后缀是索引号 1,2,3....,n。

Text 1 或 Anchor 1 将打开 Modal 1。modal-close-1 按钮或 modal-bg-1 将关闭 modal-1。 Text 2 或 Anchor 2 将打开 Modal 2。modal-close-2 按钮或 modal-bg-2 将关闭 modal-2。 Text 1 或 Anchor 3 将打开 Modal 3。modal-close-3 按钮或 modal-bg-3 将关闭 modal-3。

如何使这段代码更加优化、干燥和高效，以适应由 cms 生成的其他模式

$(document).ready(function() {

  // When Text 1 is clicked, open modal-1
  $(document).on("click", "#company-article-summary-1", function() {
    $("#company-article-modal-1").addClass("show");
    $("#company-article-modal-close-1").addClass("show");
    $("#company-article-content-1").addClass("show");
    $('body,html').css('overflow', 'hidden');
  });

  // When anchor link 1 is clicked, open modal-1
  $(document).on("click", "#company-article-cta-1", function() {
    $("#company-article-modal-1").addClass("show");
    $("#company-article-modal-close-1").addClass("show");
    $("#company-article-content-1").addClass("show");
    $('body,html').css('overflow', 'hidden');
  });

  // When Text 2 is clicked, open modal-2
  $(document).on("click", "#company-article-summary-2", function() {
    $("#company-article-modal-2").addClass("show");
    $("#company-article-modal-close-2").addClass("show");
    $("#company-article-content-2").addClass("show");
    $('body,html').css('overflow', 'hidden');
  });

  // When anchor link 2 is clicked, open modal-2
  $(document).on("click", "#company-article-cta-2", function() {
    $("#company-article-modal-2").addClass("show");
    $("#company-article-modal-close-2").addClass("show");
    $("#company-article-content-2").addClass("show");
    $('body,html').css('overflow', 'hidden');
  });

  // When Text 3 is clicked, open modal-3
  $(document).on("click", "#company-article-summary-3", function() {
    $("#company-article-modal-3").addClass("show");
    $("#company-article-modal-close-3").addClass("show");
    $("#company-article-content-3").addClass("show");
    $('body,html').css('overflow', 'hidden');
  });

  // When anchor link 3 is clicked, open modal-3
  $(document).on("click", "#company-article-cta-3", function() {
    $("#company-article-modal-3").addClass("show");
    $("#company-article-modal-close-3").addClass("show");
    $("#company-article-content-3").addClass("show");
    $('body,html').css('overflow', 'hidden');
  });


  // When background of modal-1 is clicked, close modal-1
  $('#company-article-modal-1').on('click', function(e) {
    if (e.target !== this)
      return;

    $("#company-article-modal-1").removeClass("show");
    $("#company-article-modal-close-1").removeClass("show");
    $("#company-article-content-1").removeClass("show");
    $('body,html').removeAttr("style");
  });

  // When close-button-1 of modal-1 is clicked, close modal-1
  $('#company-article-modal-close-vector-1').on('click', function() {
    $("#company-article-modal-1").removeClass("show");
    $("#company-article-modal-close-1").removeClass("show");
    $("#company-article-content-1").removeClass("show");
    $('body,html').removeAttr("style");
  });

  // When background of modal-2 is clicked, close modal-2
  $('#company-article-modal-2').on('click', function(e) {
    if (e.target !== this)
      return;

    $("#company-article-modal-2").removeClass("show");
    $("#company-article-modal-close-2").removeClass("show");
    $("#company-article-content-2").removeClass("show");
    $('body,html').removeAttr("style");
  });

  // When close-button-2 of modal-2 is clicked, close modal-2
  $('#company-article-modal-close-vector-2').on('click', function() {
    $("#company-article-modal-2").removeClass("show");
    $("#company-article-modal-close-2").removeClass("show");
    $("#company-article-content-2").removeClass("show");
    $('body,html').removeAttr("style");
  });

  // When background of modal-3 is clicked, close modal-3
  $('#company-article-modal-3').on('click', function(e) {
    if (e.target !== this)
      return;

    $("#company-article-modal-3").removeClass("show");
    $("#company-article-modal-close-3").removeClass("show");
    $("#company-article-content-3").removeClass("show");
    $('body,html').removeAttr("style");
  });

  // When close-button-3 of modal-3 is clicked, close modal-3
  $('#company-article-modal-close-vector-3').on('click', function() {
    $("#company-article-modal-3").removeClass("show");
    $("#company-article-modal-close-3").removeClass("show");
    $("#company-article-content-3").removeClass("show");
    $('body,html').removeAttr("style");
  });
})

.company-side-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: all .5s ease-in-out;
  opacity: 0;
  z-index: -9999;
  pointer-events: none;
}

.company-side-modal.show {
  z-index: 999999;
  opacity: 1;
  transition: all .5s ease-out;
  pointer-events: auto;
}

.company-side-modal-close {
  fill: #fff;
}

.company-side-modal-close-container {
  position: absolute;
  top: 60px;
  left: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translate(-69px, 0);
}

.company-side-modal-close-container.show {
  transition-delay: .07s;
  opacity: 1;
}

.company-side-modal-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  margin-left: auto;
  transform: translate(100%, 0);
  transition: all .3s ease;
  perspective: 1000;
  opacity: 0;
}

.company-side-modal-bg.show {
  transform: translate(0, 0);
  transition: all .3s ease;
  transition-delay: .07s;
  opacity: 1;
}

.company-side-modal-content {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  position: relative;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: .01em;
  color: #000;
}

.company-side-modal-content h2 {
  font-family: sans-serif;
  color: #84553a;
  font-size: 32px;
  margin-bottom: 40px;
}

@media only screen and min-width 1439px {
  .company-side-modal-content {
    width: 720px;
  }
}

@media only screen and max-width 1100px {
  .company-side-modal-bg {
    width: 65%;
  }
  .company-side-modal-close-container {
    left: 35%;
  }
}

@media only screen and max-width 769px {
  .company-side-modal-bg {
    width: 90%;
  }
  .company-side-modal-close {
    fill: #fff;
  }
  .company-side-modal-close-container {
    left: 13%;
  }
  .company-publications-bg {
    margin-left: 0;
  }
}

@media only screen and max-width 600px {
  .company-side-modal-bg {
    width: 90%;
    right: unset;
    left: 5%;
    top: 5vh;
  }
  .company-side-modal-content {
    max-height: 90vh;
  }
  .company-side-modal-content h2 {
    width: 80%;
  }
  .company-side-modal-close {
    fill: #84553a;
  }
  .company-side-modal-close-container {
    left: unset;
    transform: unset;
    right: calc(20px+5%);
    top: calc(40px+5vh);
    z-index: 99999999;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-xl pt-3 pt-xl-5 px-0">

      <!-- First-->
      <div class="row px-2 mb-5">
        <div class="col-md-11 mx-auto">
          <p id="company-article-summary-1">Summary 1</p>
          <a id="company-article-cta-1">Cta 1</a>
        </div>

        <!-- Modal-1 -->
        <div class="company-side-modal" id="company-article-modal-1">
          <div class="company-side-modal-close-container" id="company-article-modal-close-1">
            <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-1"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
          </div>
          <div class="company-side-modal-bg bg-white" id="company-article-content-1">
            <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
              <h2>Modal Title 1</h2>
              <p>Modal Content 1</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Second -->
      <div class="row px-2 mb-5">
        <div class="col-md-11 mx-auto">
          <p id="company-article-summary-2">Summary 2</p>
          <a id="company-article-cta-2">Cta 2</a>
        </div>

        <!-- Modal-2 -->
        <div class="company-side-modal" id="company-article-modal-2">
          <div class="company-side-modal-close-container" id="company-article-modal-close-2">
            <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-2" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
          </div>
          <div class="company-side-modal-bg bg-white" id="company-article-content-2">
            <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
              <h2>Modal Title 2</h2>
              <p>Modal Content 2</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Third -->
      <div class="row px-2 mb-5">
        <div class="col-md-11 mx-auto">
          <p id="company-article-summary-3">Summary 3</p>
          <a id="company-article-cta-3">Cta 3</a>
        </div>

        <!-- Modal-3 -->
        <div class="company-side-modal" id="company-article-modal-3">
          <div class="company-side-modal-close-container" id="company-article-modal-close-3">
            <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-3" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
          </div>
          <div class="company-side-modal-bg bg-white" id="company-article-content-3">
            <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
              <h2>Modal Title 3</h2>
              <p>Modal Content 3</p>
            </div>
          </div>
        </div>
      </div>


    </div>

【问题讨论】：

您说“...容纳其他模态，因为它们是由 cms 生成的。”这是否意味着无法更改 HTML？
@phuzi 如果 html 运行良好并且适合我想要做的事情，可以更改它。上面的代码只是我正在尝试做的简化版本。你可以改变它。我会看看我是否可以解决它。谢谢
你不能有一个循环吗？ javascript $('.company-side-modal').each(function (index) { $('#company-article-modal-' + index).on('click', function (e) { if (e.target !== this) return; $("#company-article-modal-" + index).removeClass("show"); $("#company-article-modal-close-" + index).removeClass("show"); $("#company-article-content-" + index).removeClass("show"); $('body,html').removeAttr("style"); }); });

标签： javascript html jquery css

【解决方案1】：

您可以通过创建 2 个数组来优化您的代码 - 一个包含数字 (1, 2, 3)，一个包含您的 ID（“#company-article-summary-”、“#company-article-summary-”、 "#company-article-cta-") 并编写将遍历两个数组并将点击侦听器添加到每个组合的函数

let arr = [1,2,3];
let ids = ["#company-article-summary-", "#company-article-summary-", "#company-article-cta-"];

arr.forEach((element, index) => {
    ids.forEach(e => {
        $(document).on("click", e + index, function() {
            $("#company-article-modal-" + index).addClass("show");
            $("#company-article-modal-close-" + index).addClass("show");
            $("#company-article-content-" + index).addClass("show");
            $('body,html').css('overflow', 'hidden');
          });

        $('#company-article-modal-' + index).on('click', function(e) {
            if (e.target !== this)
              return;
            $("#company-article-modal-" + index).removeClass("show");
            $("#company-article-modal-close-" + index).removeClass("show");
            $("#company-article-content-" + index).removeClass("show");
            $('body,html').removeAttr("style");
          });
        
          $('#company-article-modal-close-vector-' + index).on('click', function() {
            $("#company-article-modal-" + index).removeClass("show");
            $("#company-article-modal-close-" + index).removeClass("show");
            $("#company-article-content-" + index).removeClass("show");
            $('body,html').removeAttr("style");
          });

    })
})

如果您能够更改您的 HTML 代码，请将自定义属性添加到包含您的索引的元素中，您的 JS 代码将只包含 2 个点击侦听器

$(document).ready(function() {

  $('[id^=company-article-summary-],[id^=company-article-cta-]').click(function() {
    var index = $(this).data('value');
    $("#company-article-modal-" + index).addClass("show");
    $("#company-article-modal-close-" + index).addClass("show");
    $("#company-article-content-" + index).addClass("show");
    $('body,html').css('overflow', 'hidden');
  })

  $("[id^=company-article-modal-]").click(function(e) {
    let index = $(this).data('value');
    if (e.target !== this)
      return;
    $("#company-article-modal-" + index).removeClass("show");
    $("#company-article-modal-close-" + index).removeClass("show");
    $("#company-article-content-" + index).removeClass("show");
    $('body,html').removeAttr("style");
  })


})

.company-side-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: all .5s ease-in-out;
  opacity: 0;
  z-index: -9999;
  pointer-events: none;
}

.company-side-modal.show {
  z-index: 999999;
  opacity: 1;
  transition: all .5s ease-out;
  pointer-events: auto;
}

.company-side-modal-close {
  fill: #fff;
}

.company-side-modal-close-container {
  position: absolute;
  top: 60px;
  left: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translate(-69px, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-xl pt-3 pt-xl-5 px-0">

  <!-- First-->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-1" data-value="1">Summary 1</p>
      <a id="company-article-cta-1" data-value="1">Cta 1</a>
    </div>

    <!-- Modal-1 -->
    <div class="company-side-modal" id="company-article-modal-1" data-value="1">
      <div class="company-side-modal-close-container" id="company-article-modal-close-1">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-1"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-1">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 1</h2>
          <p>Modal Content 1</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second -->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-2" data-value="2">Summary 2</p>
      <a id="company-article-cta-2" data-value="2">Cta 2</a>
    </div>

    <!-- Modal-2 -->
    <div class="company-side-modal" id="company-article-modal-2" data-value="2">
      <div class="company-side-modal-close-container" id="company-article-modal-close-2">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-2" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-2">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 2</h2>
          <p>Modal Content 2</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third -->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-3" data-value="3">Summary 3</p>
      <a id="company-article-cta-3" data-value="3">Cta 3</a>
    </div>

    <!-- Modal-3 -->
    <div class="company-side-modal" id="company-article-modal-3" data-value="3">
      <div class="company-side-modal-close-container" id="company-article-modal-close-3">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-3" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-3">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 3</h2>
          <p>Modal Content 3</p>
        </div>
      </div>
    </div>
  </div>


</div>

【讨论】：

谢谢。数字大于 3 可以编号到 100 的情况呢？这里 100 只是一个例子。可能或多或少。
您可以将 arr 数组修改为您想要的任何元素，但您应该知道在处理大数据时这非常复杂。如果您为包含摘要的段落编写一个点击侦听器，也许会更好。可以改html吗？
可以，html可以改成更好更有效的
each 再次遍历所有元素
但是可以，我们不用去触碰html，我们可以得到被点击元素的id的最后一个char$('[id^=company-article-summary-],[id^=company-article-cta-]').click(function(i) { let index = i.target.id.slice(i.target.id.length - 1) })

【解决方案2】：

您可以将重复代码包装在.forEach 中，如果要添加新代码，您只需将 id 添加到数组中即可：

let n = 3;
$(document).ready(function() {
  Array(n).fill(0).forEach(function(value, i) {
    i++;
    $(document).on("click", "#company-article-summary-" + i +", #company-article-cta-" + i, function() {
      $("#company-article-modal-" + i).addClass("show");
      $("#company-article-modal-close-" + i).addClass("show");
      $("#company-article-content-" + i).addClass("show");
      $('body,html').css('overflow', 'hidden');
    });

    $('#company-article-modal-' + i + ', #company-article-modal-close-vector-' + i).on('click', function(e) {
      if (e.target.id.indexOf('modal') > -1 && e.target !== this)
        return;

      $("#company-article-modal-" + i).removeClass("show");
      $("#company-article-modal-close-" + i).removeClass("show");
      $("#company-article-content-" + i).removeClass("show");
      $('body,html').removeAttr("style");
    });
  });
});

let n = 3;
$(document).ready(function() {
  Array(n).fill(0).forEach(function(value, i) {
    i++;
    $(document).on("click", "#company-article-summary-" + i +", #company-article-cta-" + i, function() {
      $("#company-article-modal-" + i).addClass("show");
      $("#company-article-modal-close-" + i).addClass("show");
      $("#company-article-content-" + i).addClass("show");
      $('body,html').css('overflow', 'hidden');
    });

    $('#company-article-modal-' + i + ', #company-article-modal-close-vector-' + i).on('click', function(e) {
      if (e.target.id.indexOf('modal') > -1 && e.target !== this)
        return;

      $("#company-article-modal-" + i).removeClass("show");
      $("#company-article-modal-close-" + i).removeClass("show");
      $("#company-article-content-" + i).removeClass("show");
      $('body,html').removeAttr("style");
    });
  });
});

.company-side-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: all .5s ease-in-out;
  opacity: 0;
  z-index: -9999;
  pointer-events: none;
}

.company-side-modal.show {
  z-index: 999999;
  opacity: 1;
  transition: all .5s ease-out;
  pointer-events: auto;
}

.company-side-modal-close {
  fill: #fff;
}

.company-side-modal-close-container {
  position: absolute;
  top: 60px;
  left: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translate(-69px, 0);
}

.company-side-modal-close-container.show {
  transition-delay: .07s;
  opacity: 1;
}

.company-side-modal-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  margin-left: auto;
  transform: translate(100%, 0);
  transition: all .3s ease;
  perspective: 1000;
  opacity: 0;
}

.company-side-modal-bg.show {
  transform: translate(0, 0);
  transition: all .3s ease;
  transition-delay: .07s;
  opacity: 1;
}

.company-side-modal-content {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  position: relative;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: .01em;
  color: #000;
}

.company-side-modal-content h2 {
  font-family: sans-serif;
  color: #84553a;
  font-size: 32px;
  margin-bottom: 40px;
}

@media only screen and min-width 1439px {
  .company-side-modal-content {
    width: 720px;
  }
}

@media only screen and max-width 1100px {
  .company-side-modal-bg {
    width: 65%;
  }
  .company-side-modal-close-container {
    left: 35%;
  }
}

@media only screen and max-width 769px {
  .company-side-modal-bg {
    width: 90%;
  }
  .company-side-modal-close {
    fill: #fff;
  }
  .company-side-modal-close-container {
    left: 13%;
  }
  .company-publications-bg {
    margin-left: 0;
  }
}

@media only screen and max-width 600px {
  .company-side-modal-bg {
    width: 90%;
    right: unset;
    left: 5%;
    top: 5vh;
  }
  .company-side-modal-content {
    max-height: 90vh;
  }
  .company-side-modal-content h2 {
    width: 80%;
  }
  .company-side-modal-close {
    fill: #84553a;
  }
  .company-side-modal-close-container {
    left: unset;
    transform: unset;
    right: calc(20px+5%);
    top: calc(40px+5vh);
    z-index: 99999999;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-xl pt-3 pt-xl-5 px-0">

  <!-- First-->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-1">Summary 1</p>
      <a id="company-article-cta-1">Cta 1</a>
    </div>

    <!-- Modal-1 -->
    <div class="company-side-modal" id="company-article-modal-1">
      <div class="company-side-modal-close-container" id="company-article-modal-close-1">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-1"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-1">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 1</h2>
          <p>Modal Content 1</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second -->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-2">Summary 2</p>
      <a id="company-article-cta-2">Cta 2</a>
    </div>

    <!-- Modal-2 -->
    <div class="company-side-modal" id="company-article-modal-2">
      <div class="company-side-modal-close-container" id="company-article-modal-close-2">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-2" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-2">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 2</h2>
          <p>Modal Content 2</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third -->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-3">Summary 3</p>
      <a id="company-article-cta-3">Cta 3</a>
    </div>

    <!-- Modal-3 -->
    <div class="company-side-modal" id="company-article-modal-3">
      <div class="company-side-modal-close-container" id="company-article-modal-close-3">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-3" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-3">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 3</h2>
          <p>Modal Content 3</p>
        </div>
      </div>
    </div>
  </div>


</div>

编辑

更优化的代码（感谢Sara Stoimenovska）：

$(document).ready(function() {
  $('[id^=company-article-summary-]').each(function(i) {
    $(this).data('value', i + 1);
  });
  $('[id^=company-article-cta-]').each(function(i) {
    $(this).data('value', i + 1);
  });
  $('[id^=company-article-modal-close-vector-]').each(function(i) {
    $(this).data('value', i + 1);
  });
  $('[id^=company-article-summary-],[id^=company-article-cta-]').click(function() {
    var index = $(this).data('value');
    $("#company-article-modal-" + index).addClass("show");
    $("#company-article-modal-close-" + index).addClass("show");
    $("#company-article-content-" + index).addClass("show");
    $('body,html').css('overflow', 'hidden');
  })

  $("[id^=company-article-modal-]").click(function(e) {
    let index = $(this).find('[id^=company-article-modal-close-vector-]').data('value');
    if (e.target.id.indexOf('vector') > -1 && e.target !== this)
      return;
    $("#company-article-modal-" + index).removeClass("show");
    $("#company-article-modal-close-" + index).removeClass("show");
    $("#company-article-content-" + index).removeClass("show");
    $('body,html').removeAttr("style");
  });
});

$(document).ready(function() {
  $('[id^=company-article-summary-]').each(function(i) {
    $(this).data('value', i + 1);
  });
  $('[id^=company-article-cta-]').each(function(i) {
    $(this).data('value', i + 1);
  });
  $('[id^=company-article-modal-close-vector-]').each(function(i) {
    $(this).data('value', i + 1);
  });
  $('[id^=company-article-summary-],[id^=company-article-cta-]').click(function() {
    var index = $(this).data('value');
    $("#company-article-modal-" + index).addClass("show");
    $("#company-article-modal-close-" + index).addClass("show");
    $("#company-article-content-" + index).addClass("show");
    $('body,html').css('overflow', 'hidden');
  })

  $("[id^=company-article-modal-]").click(function(e) {
    let index = $(this).find('[id^=company-article-modal-close-vector-]').data('value');
    if (e.target.id.indexOf('vector') > -1 && e.target !== this)
      return;
    $("#company-article-modal-" + index).removeClass("show");
    $("#company-article-modal-close-" + index).removeClass("show");
    $("#company-article-content-" + index).removeClass("show");
    $('body,html').removeAttr("style");
  });
});

.company-side-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: all .5s ease-in-out;
  opacity: 0;
  z-index: -9999;
  pointer-events: none;
}

.company-side-modal.show {
  z-index: 999999;
  opacity: 1;
  transition: all .5s ease-out;
  pointer-events: auto;
}

.company-side-modal-close {
  fill: #fff;
}

.company-side-modal-close-container {
  position: absolute;
  top: 60px;
  left: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translate(-69px, 0);
}

.company-side-modal-close-container.show {
  transition-delay: .07s;
  opacity: 1;
}

.company-side-modal-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  margin-left: auto;
  transform: translate(100%, 0);
  transition: all .3s ease;
  perspective: 1000;
  opacity: 0;
}

.company-side-modal-bg.show {
  transform: translate(0, 0);
  transition: all .3s ease;
  transition-delay: .07s;
  opacity: 1;
}

.company-side-modal-content {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  position: relative;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: .01em;
  color: #000;
}

.company-side-modal-content h2 {
  font-family: sans-serif;
  color: #84553a;
  font-size: 32px;
  margin-bottom: 40px;
}

@media only screen and min-width 1439px {
  .company-side-modal-content {
    width: 720px;
  }
}

@media only screen and max-width 1100px {
  .company-side-modal-bg {
    width: 65%;
  }
  .company-side-modal-close-container {
    left: 35%;
  }
}

@media only screen and max-width 769px {
  .company-side-modal-bg {
    width: 90%;
  }
  .company-side-modal-close {
    fill: #fff;
  }
  .company-side-modal-close-container {
    left: 13%;
  }
  .company-publications-bg {
    margin-left: 0;
  }
}

@media only screen and max-width 600px {
  .company-side-modal-bg {
    width: 90%;
    right: unset;
    left: 5%;
    top: 5vh;
  }
  .company-side-modal-content {
    max-height: 90vh;
  }
  .company-side-modal-content h2 {
    width: 80%;
  }
  .company-side-modal-close {
    fill: #84553a;
  }
  .company-side-modal-close-container {
    left: unset;
    transform: unset;
    right: calc(20px+5%);
    top: calc(40px+5vh);
    z-index: 99999999;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-xl pt-3 pt-xl-5 px-0">

  <!-- First-->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-1">Summary 1</p>
      <a id="company-article-cta-1">Cta 1</a>
    </div>

    <!-- Modal-1 -->
    <div class="company-side-modal" id="company-article-modal-1">
      <div class="company-side-modal-close-container" id="company-article-modal-close-1">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-1"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-1">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 1</h2>
          <p>Modal Content 1</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second -->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-2">Summary 2</p>
      <a id="company-article-cta-2">Cta 2</a>
    </div>

    <!-- Modal-2 -->
    <div class="company-side-modal" id="company-article-modal-2">
      <div class="company-side-modal-close-container" id="company-article-modal-close-2">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-2" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-2">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 2</h2>
          <p>Modal Content 2</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third -->
  <div class="row px-2 mb-5">
    <div class="col-md-11 mx-auto">
      <p id="company-article-summary-3">Summary 3</p>
      <a id="company-article-cta-3">Cta 3</a>
    </div>

    <!-- Modal-3 -->
    <div class="company-side-modal" id="company-article-modal-3">
      <div class="company-side-modal-close-container" id="company-article-modal-close-3">
        <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" class="company-side-modal-close" id="company-article-modal-close-vector-3" id="company-article"><path d="M27.367.633a2.208 2.208 0 00-3.096 0L14 10.905 3.799.633a2.208 2.208 0 00-3.095 0 2.208 2.208 0 000 3.096L10.904 14 .635 24.201a2.208 2.208 0 000 3.096c.421.422.984.633 1.547.633s1.126-.211 1.548-.633L14 17.096l10.201 10.27c.422.423.985.634 1.548.634.563 0 1.125-.211 1.548-.633a2.208 2.208 0 000-3.096L17.096 14l10.27-10.201a2.295 2.295 0 000-3.166z"/></svg>
      </div>
      <div class="company-side-modal-bg bg-white" id="company-article-content-3">
        <div class="company-side-modal-content py-4 px-2 px-md-3 py-lg-5 px-lg-4 px-xl-5 p-xl-5">
          <h2>Modal Title 3</h2>
          <p>Modal Content 3</p>
        </div>
      </div>
    </div>
  </div>


</div>

【讨论】：

是否有可能进一步优化它以适用于任何数量的数字，即使它们的数字高达 100，而无需写出数字 1、2、3、4、5、....、100 . 100 在这里只是一个例子。号码不详
您可以根据实际对象进行循环。 jQuery 对此有一个 method。
@Idris 你可以像上面一样使用Array(3).fill(0)，请检查更新的代码。现在你可以只提到模态的数量
谢谢@shrys。我会用那个
这不是一个优化的解决方案。如果您有 100 个项目，即使您根本不使用它们，它也会迭代所有 100 个项目并为每个项目添加点击监听器（总共 3 个 = 300 个点击监听器）

【解决方案3】：

第一步是将重复的代码包装在一个函数中：

$(document).ready(function () {
  function showContent(selector) {
    $(selector).addClass("show");
    $("body,html").css("overflow", "hidden");
  }

  function hideContent(selector) {
    $(selector).removeClass("show");
    $("body,html").css("overflow", "");
  }

  $(document).on("click", "#company-article-summary-1,#company-article-cta-1", function () {
    showContent("#company-article-modal-1,#company-article-modal-close-1,#company-article-content-1");
  });

  $(document).on("click", "#company-article-modal-1,#company-article-modal-close-vector-1", function () {
    hideContent("#company-article-modal-1,#company-article-modal-close-1,#company-article-content-1");
  });
});

  // repeat for 2, 3

然后，您应该为 summary、cta、modal 和 modal-close 元素分别指定一个类名，以便您可以使用更简单的选择器来定位它们，例如

$(document).on("click", ".article-summary,.article-content", function () {

然后，考虑到您的标记是如何布局的，最好通过在元素层次结构中查找模式/关闭/内容元素来定位它们；像

showContent($(this).closest(".row").find(".modal,.modal-close,.article"));

【讨论】：