如何仅通过数字更改来优化这些可重复的 Javascript 代码集
我有一组可重复且类似的代码来打开和关闭多个模式。模态的数量最多可达一百个，因为它们将通过 cms 生成，并且我已将其编程为使用 ids 来调用每个模态及其自己不同的内容。这些模式在单击文本或锚链接时打开，在单击背景或关闭按钮时关闭。用于标记文本、锚链接和模态的 id 都很相似，只是它们的后缀是索引号 1,2,3....,n。
文本 1 或锚点 1 将打开模态 1。 modal-close-1 按钮或 modal-bg-1 将关闭 modal-1。文本 2 或锚点 2 将打开模态 2。 modal-close-2 按钮或 modal-bg-2 将关闭模态 2。文本 1 或锚点 3 将打开模态 3。 modal-close-3 按钮或 modal-bg-3 将关闭模态 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');
});
});
})
Helenr浏览 190回答 3
3回答
-
肥皂起泡泡
您可以通过创建 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> -
不负相思意
你可以将重复的代码包装在 中.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-si编辑更优化的代码（感谢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> -
泛舟湖上清波郎朗
第一步是将重复的代码包装在函数中：$(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"));
随时随地看视频慕课网APP
相关分类
JavaScript