Question

我在页面中有一个部分，其中包含图像和按钮，通过引导触发模态，按钮上有一个onclick事件，通过覆盖模态的默认标题文本显示图像标题，有4-5个图像使用不同的标题名称。

但是当我使用事件处理程序时，它会显示第一个图像的标题名称，并且当我点击第二个图像时不会更新标题，我知道我可以通过为每个按钮分配唯一的事件处理程序来实现它，等等但如果有办法在所有按钮上只有一个事件处理，就像“内容应根据特定图像的文本更新”

JS

function modalPreview() {
    modalTitle.innerHTML = header.innerHTML;
}

HTML

<div class="container" id="modalTest">
   <div class="modal fade" id="showModalTest">
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="modalTitle">Modal Title</h5>
               <button type="button" class="close" data-dismiss="modal">
               <span>&times; </span>
               </button>
            </div>
            <div class="modal-body">
               <img src="http://via.placeholder.com/950x350" alt="product-image-stretch" class="img-fluid" id="modal-images" />
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-primary">Buy</button>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

由于你没有发布触发模态的内容，我假设你的代码中有一个按钮，onclick监听器。

由于你使用Bs模态，你肯定会在你的页面上加载jQuery，那么为什么不使用BS事件和一些jQuery呢？

$('#modalTest').on('show.bs.modal', function(){
    $(this).find('.modal-title').text("New modal Title");
});

如果每张图片都有一个触发按钮，我建议改为：

$('.my_btn').on('click', function(){
    var new_title = $(this).closest('.image_and_button_container').find('.header_value').text();  //get your new header
    $('#modalTest .modal-title').text(new_title);         //set it
    $('#modalTest').modal('show');                        //and trigger modal
});

查看BS modal events了解详情

onclick可触发特定标签

1 个答案: