动态生成HTML的jQuery值修改问题：选中下拉项后所有行同步变更

我通过PHP从MySQL表动态生成了多个带下拉菜单的.main-assign行，需求是选中下拉菜单中的.employees选项时，仅修改当前对应行的.set-img图片和.set-name名称。但现有的jQuery代码执行时，所有.main-assign行的图片和名称都会被修改，不知道如何解决。

相关代码 #

HTML/PHP代码 #

<?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 } ?>

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);
    });
});

问题出在你使用了全局选择器（$('.mydata')、$('.set-img')、$('.set-name')），这些选择器会匹配页面上所有对应的元素，导致所有行都被修改。

你需要先定位到当前点击的.employees所在的那一行.main-assign容器，再在这个容器内查找需要修改的元素。修改后的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');
        
        // 找到当前点击元素所属的.main-assign容器
        var currentRow = $(this).closest('.main-assign');
        
        // 仅修改当前容器内的对应元素
        currentRow.find('.mydata').val(data);
        currentRow.find('.set-img').attr('src', img);
        currentRow.find('.set-name').text(name);
    });
});

核心改动是用$(this).closest('.main-assign')获取当前点击元素的最近祖先.main-assign容器，然后通过currentRow.find()来限定查找范围，这样只会修改当前行的元素，不会影响其他行。

内容的提问来源于stack exchange，提问作者imsh1vaay