gpt4 book ai didi

javascript - 单击列表元素时动态更改模态的内容

转载 作者:行者123 更新时间:2023-11-30 16:28:44 25 4
gpt4 key购买 nike

我有一个模拟社交网站新闻源的 html 页面。在这里,来自不同用户的帖子在无序列表中生成为 li。我想在单击这些列表元素中的任何一个时显示一个弹出模式,这些元素会动态显示该特定列表元素的内容。标记如下:

<body>  
<div class="container" >


<ul id="newsfeed">
<li class="news" data-toggle="modal" data-target="#myModal">

<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jhon</p>
<p class="text">good moprning every body</p>
<p>posted at 12:30pm</p>

<hr>

</li>

<li class="news" data-toggle="modal" data-target="#myModal">

<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jimmy</p>
<p class="text">hello every body</p>
<p>posted at 12:30pm</p>

<hr>

</li>

<li class="news" data-toggle="modal" data-target="#myModal">

<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">joe</p>
<p class="text">felling bored at home</p>
<p>posted at 12:30pm</p>

<hr>

</li>

</ul>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="popup">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

</div>
</body>

我试过的JQuery:

<script>
$('#myModal').on('show.bs.modal', function (event) {
var element = $(event.relatedTarget); // the li that triggered the modal to show
var dynamic_text = element.find('.text').val(); // Extract the value of the .text div inside that li
var modal = $(this);
$("#popup").html('the users post says: ' + dynamic_text);
});
</script>

最佳答案

.popup 是类,不是 id。需要改变

  modal.find('.popup').text('the users post says: ' + dynamic_text);

  $("#popup").html('the users post says: ' + dynamic_text);

并将 val 更改为这样的文本:

 var dynamic_text = element.find('.text').text();

fiddle http://jsfiddle.net/6oh9aacL/1/

关于javascript - 单击列表元素时动态更改模态的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33684429/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com