動態更改列表元素上的模態內容點擊

我有一個模擬社交網站新聞源的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>

來源

2015-11-13 amin365

你的內容是不是#popup .popup，嘗試$（ '#popup'）。html（'用戶帖子說：'+ dynamic_text））; –

.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();

小提琴http://jsfiddle.net/6oh9aacL/1/

來源

2015-11-13 01:25:53 Cory

我試過了，但它仍然顯示了默認文字模式身體 – amin365

謝謝，但這有點奇怪，但。該代碼在小提琴中工作，但不工作在我的瀏覽器，當我嘗試從HTML flie做到這一點。 – amin365

嘗試從控制檯進行調試。 – Cory

動態更改列表元素上的模態內容點擊

回答

相關問題