我有一组可重复且类似的代码来打开和关闭多个模式。模态的数量最多可达一百个，因为它们将通过 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');
});
});
})
肥皂起泡泡
不负相思意
泛舟湖上清波郎朗
相关分类