Question

我有一个引导程序模式，可以更改9个不同元素的内容（取决于用户单击的内容）。目前，我能够更改每个模式的标题和描述区域，但是在更改模式的href =“”属性时遇到问题。

这是我的html模式代码，

   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div
      <div class="modal-body">
        <div>
          <p></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"><a href="#">Visit Site</a></button>
      </div>
     </div>
    </div>
   </div>

这是用户单击以激活模式的img（我总共有9个）

<img data-toggle="modal" data-target="#exampleModal" 
data-whatever="Project 1" 
data-description="This is the description for Project 1" 
src="source of my image">

和jQuery

$("#exampleModal").on("show.bs.modal", function(event) {
 var button = $(event.relatedTarget);
 var recipient = button.data("whatever");
 var info = button.data("description");

 var modal = $(this);
 modal.find(".modal-title").text(recipient);
 modal.find(".modal-body p").text(info);
});

因此，我的JQuery从img中提取所有数据和数据描述，并将它们插入到JQuery中。我无法找到一种方法来定位引导程序模式代码中“访问站点”链接的href属性。我尝试添加带有所需URL的新数据链接，但这只会更改文本，而不会设置实际链接。

此外，我想向模式中添加一个图像，该图像根据用户单击以激活模式的图像而有所不同。

Answer 1

使用attr（）更改href。请按照以下示例操作，可能会对您有所帮助。

$("a").attr("href","https://stackoverflow.com");

Answer 2

<img src="image.jpg data-title="Title one" data-desc="Description one" data-toggle="modal" data-target="#exampleModal" />

<img src="image.jpg data-title="Title two" data-desc="Description two" data-toggle="modal" data-target="#exampleModal"/>

<img src="image.jpg data-title="Title three" data-desc="Description three" data-toggle="modal" data-target="#exampleModal"/>

jQuery

$('img[data-target="#exampleModal"]').on('click', function() {

    var title = $(this).data('title');

    var desc = $(this).data('desc');

    $('#exampleModal .modal-title').html(title);

    $('#exampleModal .modal-body').html(desc);

  });

})

Answer 3

尝试一下：

$("#exampleModal").on("show.bs.modal", function(event) {
	var button = $(event.relatedTarget);
	var recipient = button.data("whatever");
	var info = button.data("description");
	var link = button.data("href");
	var img_src = button.attr("src");
	var modal = $(this);
	modal.find(".modal-title").text(recipient);
	modal.find(".modal-body p").text(info);
	modal.find(".modal-body img").attr("src", img_src);
	modal.find(".modal-footer button a").attr("href", link);
});

<!DOCTYPE html>
<html>
    <head>
        <title>Image Modal</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css">
    </head>

    <body>
        
        <img data-toggle="modal" data-target="#exampleModal" data-whatever="Project 1" data-description="This is the description for Project 1" data-href="https://www.google.com" src="https://www.gstatic.com/webp/gallery/5.sm.jpg">

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <img src="" height="200px" width="200px" />
                            <p></p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary"><a href="#">Visit Site</a></button>
                    </div>
                </div>
            </div>
        </div>


        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
    </body>
</html>

在引导程序模式中更改href属性

3 个答案: