Question

我想使用单个弹出窗口，在单击不同的列表元素时显示，我希望列表元素为弹出窗口提供信息。我试了一下，但我似乎无法将文本（从li元素）动态地提取到弹出窗口

列表项目：

    <ul id="wizard-card-list">
        <li class="wizard-card" data-toggle="modal" data-target="#emailpopup">
            <a href="#" class="cd-popup-trigger">
                <img class="wizard-card-avatar" src="img/avatars/chrisandashley.png">
                <h5 class="wizard-name">Chris & Ashley</h5>
                <span>U.S.A. West Coast</span>
            </a>
        </li>
    </ul>

PopUp：

 <div id="email-popup" class="modal cd-popup" role="alert">
        <div class="cd-popup-container">
            <div id="popup-wizard-name"
            <p>Chris & Ashley</p>
            <a href="#0" class="cd-popup-close img-replace">Close</a>
        </div> <!-- cd-popup-container -->
      </div> <!-- cd-popup -->

javascript：

jQuery(document).ready(function($){

//open popup
$('.cd-popup-trigger').on('click', function(event){
    var element = $(event.relatedTarget); // the li that triggered the modal to show
    var dynamic_text = element.find('.wizard-name').text(); // Extract the value of the .text div inside that li

    event.preventDefault();
    $('#email-popup').addClass('is-visible');

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

});

Answer 1

您可以使用relatedTarget代替$(this)。查看下面的更新代码段。

＆＃13;

//open popup
$('.cd-popup-trigger').on('click', function(event){
   // var element = $(event.relatedTarget); // the li that triggered the modal to show
    var dynamic_text = $(this).find('.wizard-name').text(); // Extract the value of the .text div inside that li

    event.preventDefault();
    $('#email-popup').addClass('is-visible');

    $("#popup-wizard-name").html('the users post says: ' + dynamic_text );

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wizard-card-list">
        <li class="wizard-card" data-toggle="modal" data-target="#emailpopup">
            <a href="#" class="cd-popup-trigger">
                <img class="wizard-card-avatar" src="img/avatars/chrisandashley.png">
                <h5 class="wizard-name">Chris & Ashley</h5>
                <span>U.S.A. West Coast</span>
            </a>
        </li>
    </ul>
 

 <div id="email-popup" class="modal cd-popup" role="alert">
        <div class="cd-popup-container">
            <div id="popup-wizard-name">
            <p>Chris & Ashley</p>
            <a href="#0" class="cd-popup-close img-replace">Close</a>
        </div> <!-- cd-popup-container -->
      </div> <!-- cd-popup -->

＆＃13;

Answer 2

使用$(this)代替$(event.relatedTarget)：

var element = $(this); // the li that triggered the modal to show
var dynamic_text = element.find('.wizard-name').text(); // Extract the value of the .text div inside that li

弹出窗口中的动态内容

2 个答案: