首页猿问如何仅通过数字更改来优化这些可重复...

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

JavaScript

Helenr 2023-08-18 17:48:31

我有一组可重复且类似的代码来打开和关闭多个模式。模态的数量最多可达一百个，因为它们将通过 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'); }); });})

查看完整描述

3 回答

肥皂起泡泡

TA贡献1829条经验获得超6个赞

您可以通过创建 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);

}

<p id="company-article-summary-1" data-value="1">Summary 1</p>

</div>

</div>

<h2>Modal Title 1</h2>

<p>Modal Content 1</p>

</div>

<p id="company-article-summary-2" data-value="2">Summary 2</p>

</div>

</div>

<h2>Modal Title 2</h2>

<p>Modal Content 2</p>

</div>

<p id="company-article-summary-3" data-value="3">Summary 3</p>

</div>

</div>

<h2>Modal Title 3</h2>

<p>Modal Content 3</p>

</div>

反对回复 2023-08-18

不负相思意

TA贡献1777条经验获得超10个赞

你可以将重复的代码包装在中.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;

}

<p id="company-article-summary-1">Summary 1</p>

</div>

</div>

<h2>Modal Title 1</h2>

<p>Modal Content 1</p>

</div>

<p id="company-article-summary-2">Summary 2</p>

</div>

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

}

<p id="company-article-summary-1">Summary 1</p>

</div>

</div>

<h2>Modal Title 1</h2>

<p>Modal Content 1</p>

</div>

<p id="company-article-summary-2">Summary 2</p>

</div>

</div>

<h2>Modal Title 2</h2>

<p>Modal Content 2</p>

</div>

<p id="company-article-summary-3">Summary 3</p>

</div>

</div>

<h2>Modal Title 3</h2>

<p>Modal Content 3</p>

</div>

反对回复 2023-08-18

泛舟湖上清波郎朗

TA贡献1818条经验获得超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"));

反对回复 2023-08-18

3 回答
0 关注
118 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

3 回答

添加回答