微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

作为数据属性传递给 JS

如何解决作为数据属性传递给 JS

我正在尝试通过 HTML 中的数据属性传递图像源(数据徽标)以及包含图像的文件夹(数据文件夹)以在 Javascript 中检索。图像加载正确,但在检索文件夹时,我遇到了“加载资源失败:服务器响应状态为 404(未找到)”错误。为什么会出现这种情况,我该如何解决

我的 HTML 代码

<button type="button" class="col-md-12 modal-button" data-toggle="modal"
   data-target="#exampleModal" data-name="&ltinterstell/Her&gt" 
   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 目录是这样的:

img directory

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。