第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何僅通過(guò)數(shù)字更改來(lái)優(yōu)化這些可重復(fù)的 Javascript 代碼集

如何僅通過(guò)數(shù)字更改來(lái)優(yōu)化這些可重復(fù)的 Javascript 代碼集

Helenr 2023-08-18 17:48:31
我有一組可重復(fù)且類(lèi)似的代碼來(lái)打開(kāi)和關(guān)閉多個(gè)模式。模態(tài)的數(shù)量最多可達(dá)一百個(gè)，因?yàn)樗鼈儗⑼ㄟ^(guò) cms 生成，并且我已將其編程為使用 ids 來(lái)調(diào)用每個(gè)模態(tài)及其自己不同的內(nèi)容。這些模式在單擊文本或錨鏈接時(shí)打開(kāi)，在單擊背景或關(guān)閉按鈕時(shí)關(guān)閉。用于標(biāo)記文本、錨鏈接和模態(tài)的 id 都很相似，只是它們的后綴是索引號(hào) 1,2,3....,n。文本 1 或錨點(diǎn) 1 將打開(kāi)模態(tài) 1。 modal-close-1 按鈕或 modal-bg-1 將關(guān)閉 modal-1。文本 2 或錨點(diǎn) 2 將打開(kāi)模態(tài) 2。 modal-close-2 按鈕或 modal-bg-2 將關(guān)閉模態(tài) 2。文本 1 或錨點(diǎn) 3 將打開(kāi)模態(tài) 3。 modal-close-3 按鈕或 modal-bg-3 將關(guān)閉模態(tài) 3。如何使這段代碼更加優(yōu)化、干燥和高效，以適應(yīng)由 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');  });  });})
查看完整描述

3 回答

?
肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

您可以通過(guò)創(chuàng)建 2 個(gè)數(shù)組來(lái)優(yōu)化代碼 - 一個(gè)包含數(shù)字 (1, 2, 3)，另一個(gè)包含您的 id ("#company-article-summary-", "#company-article-summary-", "#company -article-cta-") 并編寫(xiě)將迭代兩個(gè)數(shù)組并將單擊偵聽(tīng)器添加到每個(gè)組合的函數(shù)


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 代碼，請(qǐng)將自定義屬性添加到包含索引的元素，并且您的 JS 代碼將僅包含 2 個(gè)點(diǎn)擊偵聽(tīng)器


$(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>


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
不負(fù)相思意

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超10個(gè)贊

你可以將重復(fù)的代碼包裝在 中.forEach，如果要添加新的代碼，只需將 id 添加到數(shù)組中即可：


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-si

編輯


更優(yōu)化的代碼（感謝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>



查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
泛舟湖上清波郎朗

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊

第一步是將重復(fù)的代碼包裝在函數(shù)中：


$(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

然后，您應(yīng)該為summary、cta和元素分別指定一個(gè)類(lèi)名稱(chēng)，以便您可以modal使用modal-close更簡(jiǎn)單的選擇器來(lái)定位它們，例如


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

然后，考慮到標(biāo)記的布局方式，最好通過(guò)在元素層次結(jié)構(gòu)中查找模式/關(guān)閉/內(nèi)容元素來(lái)定位它們；就像是


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


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 3 回答
  • 0 關(guān)注
  • 163 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)