PHP循环生成的.shares元素点击后无法用jQuery修改模态框display属性

看起来你遇到的问题主要来自三个方面：重复ID的HTML错误、jQuery与原生JS混用的语法问题，以及元素选择器的逻辑偏差。我来一步步帮你修复：

问题分析 #

1. 重复的ID属性：你的PHP循环里给每个视频都生成了id="myModal"和id="close"，但HTML规范要求ID必须是唯一的。这导致document.getElementById('myModal')永远只能获取到页面上第一个modal，后续的按钮点击根本无法触发对应视频的弹窗。
2. jQuery与原生JS混用错误：你写的$(this).parent().children(".modal-content").style.display = 'block'是错误的——$(...)返回的是jQuery对象，而.style是原生DOM元素的属性，jQuery对象没有这个属性，执行时会直接报错。
3. 元素选择逻辑不准确：从你的HTML结构来看，.shares和对应的.modal是同级元素（都在.some-parent容器内），用parent().children()虽然能找到，但不够精准，容易误选其他元素。

解决方案 #

第一步：修复重复ID的问题 #

修改PHP代码中生成modal的部分，把唯一ID改成类名，避免冲突：

// 把id='myModal'改成class='modal'，id='close'改成class='close-modal'
echo "&nbsp;&nbsp;&nbsp;&nbsp;<span class='shares' style='width:25px;height:30px;cursor:pointer;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/share.jpg' alt='share image' style='width:35px;height:20px;margin-bottom:-4px;opacity:.6;'>&nbsp;<span style='color:purple;font-weight:bold;'>".$shares."</span></span>&nbsp;<div class='pull'></div><div class='modal' style='position:absolute;bottom:-20px;background:#ccc;'><div class='modal-content' style='position:absolute;bottom:-20px;background:#ccc;width:520px;margin:15px;display:none;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/images(213).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(215).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(216).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(217).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(218).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(219).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(220).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(223).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<img src='images/images(225).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'>&nbsp;&nbsp;<div style='background:#ffffff;color:#000000;margin:15px;height:25px;font-size:16px;'>$url</div><button class='close-modal' style='float:right;background:ghostwhite;margin-right:15px;cursor:pointer;'>close</button></div></div>";

第二步：修正JavaScript逻辑 #

用纯jQuery的方式处理元素选择和样式修改，避免混用原生语法：

// 点击.shares按钮显示对应modal
$(".shares").on('click', function() {
    // 找到当前按钮对应的同级.modal元素
    const $targetModal = $(this).nextAll('.modal').first();
    // 显示modal和内部的content
    $targetModal.show();
    $targetModal.find('.modal-content').show();
});

// 点击关闭按钮隐藏modal
$(".close-modal").on('click', function() {
    const $targetModal = $(this).closest('.modal');
    $targetModal.hide();
    $targetModal.find('.modal-content').hide();
});

可选优化：把样式移到CSS文件 #

建议把内联的display:none和其他样式移到外部CSS文件，让代码更整洁易维护：

.modal {
    display: none;
    position: absolute;
    bottom: -20px;
    background: #ccc;
}

.modal-content {
    display: none;
    position: absolute;
    bottom: -20px;
    background: #ccc;
    width: 520px;
    margin: 15px;
}

之后PHP里就可以去掉这些内联的style="display:none;"等属性了。

为什么这样能解决问题 #

• 用类名替代重复ID后，每个视频的modal都能被独立选中；
• 用jQuery的.show()、.find()、.closest()等方法，避免了原生JS和jQuery对象的混淆；
• nextAll('.modal').first()精准定位到当前按钮对应的那个modal，不会干扰其他视频的弹窗。

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