使用 jQuery 更改动态生成的 HTML 的值

Question

我有一个如下所示的下拉菜单：

<?php

while($set_va = mysqli_fetch_array($get_va)) {

?>
<div class="main-assign">
    <div class="assign-va" data-bs-toggle="dropdown">
        <div class="assign-btn">
            <button type="button" class="btn dropdown-toggle dropdown-toggle-btn">
                <div class='avatar-img-left'>
                    <img src='<?= ($set_va['picture'] == NULL) ? 'uploads/emp_dp/koala.png' : 'uploads/emp_dp/'.$set_va['picture'] ?>' 
                    class='me-2 rounded-circle avatar avatar-lg set-img'>
                </div>
                <div class='avatar-text-right' style="margin-top: 0">
                    <p class='avatar-name set-name' style="text-align: left">
                        <?= (empty($set_va) ? 'Unassigned' : $set_va['name']) ?>
                    </p>
                </div>
            </button>
        </div>
        <div class="assign-caret">
            <span>&#9660;</span>
        </div>
    </div>
    <div class="dropdown-menu">
        <div class="parent-employee">
            <?php while($set_emp = mysqli_fetch_array($get_emp)) { ?>

            <div class="employees" style="cursor: pointer">
                <div class='avatar-img-left'>
                    <img src='<?= ($set_emp['picture'] == NULL) ? 'uploads/emp_dp/koala.png' : 'uploads/emp_dp/'.$set_emp['picture'] ?>' 
                    class='me-2 rounded-circle avatar avatar-lg get-img' 
                    data-eimg="<?= ($set_emp['picture'] == NULL) ? 'uploads/emp_dp/koala.png' : 'uploads/emp_dp/'.$set_emp['picture'] ?>">
                </div>
                <div class='avatar-text-right'>
                    <p class='avatar-name get-name' 
                    data-ename="<?= $set_emp['name'] ?>">
                        <?= $set_emp['name'] ?>
                    </p>
                    <input type="hidden" name="mydata" class="mydata" value="" 
                    data-evalues="<?= $set_emp['id'].'#'.$set_task['id'] ?>">
                    
                    <input type="hidden" class="empid" id="empid" 
                    value="<?= $set_emp['id'] ?>">
                    <span class='avatar-desig'><?= $set_emp['designation'] ?></span>
                </div>
            </div>

            <?php } ?>

        </div>
    </div>
</div>

<?php } ?>

我想使用用户从下拉菜单中选择的任何选项更改

set-image

类中的图像和

set-name

类中的名称。

这是我的 jQuery 代码：

$(document).ready(function(e) {
    $(document).on('click', '.employees', function() {
        var img = $(this).find('.get-img').data('eimg');
        var name = $(this).find('.get-name').data('ename');
        var data = $(this).find('.mydata').data('evalues');

        $('.mydata').val(data);

        $('.set-img').attr('src', img);
        $('.set-name').text(name);
    });
});

现在，问题是，如您所见，下拉行

main-assign

本身是使用 PHP 从 MySQL 表生成的，当我从下拉菜单

dropdown-menu

中选择一个值时，在

main-assign

上正在改变。

我不确定如何解决这个问题。任何帮助将不胜感激！

非常感谢！

Answer 1

我想你只需要针对

.assign-btn

里面的元素

$(document).on('click', '.employees', function() {
    var img = $(this).find('.get-img').data('eimg');
    var name = $(this).find('.get-name').data('ename');
    var data = $(this).find('.mydata').data('evalues');

    $('.assign-btn .mydata').val(data);
    $('.assign-btn .set-img').attr('src', img);
    $('.assign-btn .set-name').text(name);
});

否则它会将值分配给页面中的每个

.set-img

实例。例如