单击以触发特定标记

Question

我在页面中有一个部分，它有图像和按钮，它通过引导来触发一个模态，在这个按钮上，我有一个onclick事件，它通过覆盖模式的默认标题文本来显示图像标题，并且有4-5个具有不同标题名称的图像。

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

JS

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

<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模态事件以获得更多信息