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

标签 javascript jquery html css

我有一个模拟社交网站新闻源的 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/

相关文章:

javascript - 使用javascript css隐藏显示div

javascript - Firefox 中带有 onkeyup 监听器的文本框中缺少字符

javascript - 生成数组 JavaScript

html - 使用 Bootstrap 3 和 AngularJS 在输入字段后添加星号

javascript - 我如何使用下拉列表根据其 DateTransaction 对其进行排序?

javascript - HTML 表格标题显示不正确

javascript - 两个 jQuery 选择器有什么区别?

Javascript 门面模式从不显示初始设置

javascript - React - 如何将图像复制到剪贴板?

php - 在客户端检测文件上传大小?