如何解决作为数据属性传递给 JS
我正在尝试通过 HTML 中的数据属性传递图像源(数据徽标)以及包含图像的文件夹(数据文件夹)以在 Javascript 中检索。图像加载正确,但在检索文件夹时,我遇到了“加载资源失败:服务器响应状态为 404(未找到)”错误。为什么会出现这种情况,我该如何解决?
我的 HTML 代码:
<button type="button" class="col-md-12 modal-button" data-toggle="modal"
data-target="#exampleModal" data-name="<interstell/Her>"
data-subtitle="2021 Hackathon" data-logo="/img/logos/interstellher-logo.jpg"
data-folder="/img/interstellHer">
...
</button>
JS:
$('#exampleModal').on('show.bs.modal',function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('name')
var sub_title = button.data('subtitle')
var logo = button.data('logo')
var folder = button.data('folder')
//get other values using .find..
var description = button.find('.event-info').text()
var date = button.find('.events-date p').text()
var place = button.find('.events-place p').text()
console.log(logo)
console.log(folder)
var modal = $(this)
modal.find('.modal-img').attr("src",logo)
modal.find('.modal-title').text(recipient)
modal.find('.modal-subtitle').text(sub_title)
modal.find('.modal-blurb').text(description)
modal.find('.modal-events-date p').text(date)
modal.find('.modal-events-place p').text(place)
var pictures = [];
$.ajax({
url: folder,success: function (data) {
$(data).find("a").attr("href",function (i,val) {
if (val.match(/\.(jpe?g|png|gif)$/)) {
pictures.append("<img src='" + folder + val + "'>");
}
});
}
});
})
img 目录是这样的:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。