我正在尝试使 jQuery 函数根据单击按钮动态决定运行哪个数组。理想情况下,它是这样工作的:
- 用户点击“查看更多...”按钮之一。
- 该程序会加载该特定类别(体育、音乐会等)的下 3 张图片。
下面是该功能的一个版本,但仅适用于音乐会部分:
var altConcert = [
"Concert 1",
"Concert 2",
"Concert 3",
"Concert 4",
"Concert 5",
"Concert 6"
];
var imgConcert = [
"https://via.placeholder.com/101/000000",
"https://via.placeholder.com/102/000000",
"https://via.placeholder.com/103/000000",
"https://via.placeholder.com/104/000000",
"https://via.placeholder.com/105/000000",
"https://via.placeholder.com/106/000000"
];
var altSport = [
"Sport 1",
"Sport 2",
"Sport 3",
"Sport 4",
"Sport 5",
"Sport 6"
];
var imgSport = [
"https://via.placeholder.com/101/0000FF",
"https://via.placeholder.com/102/0000FF",
"https://via.placeholder.com/103/0000FF",
"https://via.placeholder.com/104/0000FF",
"https://via.placeholder.com/105/0000FF",
"https://via.placeholder.com/106/0000FF"
];
var count = 0;
$(".load-more-concerts").click(function() {
//Load the next 3 images
for (i = 0; i < 3; i++) {
$("#extraConcert").append(
'<div">' +
'<h3>'+altConcert[count]+'</h3>' +
'<img src="'+imgConcert[count]+'" alt="'+altConcert[count]+'"/>' +
'</div>');
count++;
}
//Scroll to the top (+100px) of the newly loaded images
$('<div id="new-concert-div'+count+'"> </div>').appendTo('#extraConcert');
$('body, html').animate({ scrollTop: $('#new-concert-div'+count+'').offset().top - 100}, 1000);
//Remove the "View More" button when out of images
if (count >= imgConcert.length) {
$(".view-more-concerts").css("display", "none");
return;
}
});
#Concerts { float: left; padding-right: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Concerts">
<div id="extraConcert">
<div id="new-concert-div1"> </div>
</div>
<div class="load-more-concerts">
<button class="view-more-concerts">View More Concerts</button>
</div>
</div>
<div id="Sports">
<div id="extraSports">
<div id="new-sports-div1"> </div>
</div>
<div class="load-more-sports">
<button class="view-more-sports">View More Sports</button>
</div>
</div>
有没有一种方法可以使用 div 的 ID 名称(“Sports”或“Concerts”)或者将数组作为参数传递给 jQuery 函数?还是有其他更简单的方法来解决我完全想念的这个问题?如果我只是用不同的名称复制函数,我相信我可以让它工作,但我正在尝试遵循 DRY Principle .
最佳答案
您可以使用 data
html 属性来实现您要查找的内容。
在您的 js 文件中,您可以获取这些数据属性并像我在下面的代码中所做的那样验证它们。
var altConcert = [
"Concert 1",
"Concert 2",
"Concert 3",
"Concert 4",
"Concert 5",
"Concert 6"
];
var imgConcert = [
"https://via.placeholder.com/101/000000",
"https://via.placeholder.com/102/000000",
"https://via.placeholder.com/103/000000",
"https://via.placeholder.com/104/000000",
"https://via.placeholder.com/105/000000",
"https://via.placeholder.com/106/000000"
];
var altSport = [
"Sport 1",
"Sport 2",
"Sport 3",
"Sport 4",
"Sport 5",
"Sport 6"
];
var imgSport = [
"https://via.placeholder.com/101/0000FF",
"https://via.placeholder.com/102/0000FF",
"https://via.placeholder.com/103/0000FF",
"https://via.placeholder.com/104/0000FF",
"https://via.placeholder.com/105/0000FF",
"https://via.placeholder.com/106/0000FF"
];
var count = 0;
$(".load-more").click(function() {
let alt = window[$(this).attr('data-alt')];
let img = window[$(this).attr('data-img')];
let target = $(this).attr('data-target');
//Load the next 3 images
for (i = 0; i < 3; i++) {
$(`#${target}`).append(
'<div">' +
'<h3>'+alt[count]+'</h3>' +
'<img src="'+img[count]+'" alt="'+alt[count]+'"/>' +
'</div>');
count++;
}
//Scroll to the top (+100px) of the newly loaded images
$('<div id="new-concert-div'+count+'"> </div>').appendTo('#extraConcert');
$('body, html').animate({ scrollTop: $('#new-concert-div'+count+'').offset().top - 100}, 1000);
//Remove the "View More" button when out of images
if (count >= imgConcert.length) {
$(".view-more-concerts").css("display", "none");
return;
}
});
#Concerts { float: left; padding-right: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Concerts">
<div id="extraConcert">
<div id="new-concert-div1"> </div>
</div>
<div class="load-more-concerts load-more" data-alt="altConcert" data-img="imgConcert" data-target="extraConcert">
<button class="view-more-concerts">View More Concerts</button>
</div>
</div>
<div id="Sports">
<div id="extraSports">
<div id="new-sports-div1"> </div>
</div>
<div class="load-more-sports load-more" data-alt="altSport" data-img="imgSport" data-target="extraSports">
<button class="view-more-sports">View More Sports</button>
</div>
</div>
在我的代码中,我获取了 data
属性,在这种情况下,我使用了 data-target
、data-alt
和 data-img
。
data-target
将使用 id 的目标。data-alt
将是 alt 数组。data-img
将是 img 数组。
在 javascript 代码中,我使用 window
从返回的 data-*
字符串中获取变量。
当 count
大于数组长度时,它开始抛出 undefined
,但这可以通过 if(alt[count] ! == 未定义)
。
关于data
属性的更多信息可以在这里找到:https://www.w3schools.com/tags/att_data-.asp
关于javascript - 通过函数动态选择运行哪个数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65817454/