PHP数组元素绑定DIV，点击对应位置获取数组值的技术问询

原代码存在的核心问题 #

• PHP数组定义语法错误：$array=(15,20,50,23,10); 不是合法的PHP数组定义，需改为标准数组语法。
• 重复ID：循环生成的所有<input>都用了id="postid"，HTML中ID必须唯一，会导致JS无法精准定位对应元素。
• 事件绑定错误：JS绑定的是隐藏input的点击事件，但需求是点击可见DIV触发操作。
• 值获取逻辑错误：$('#postid').val()只会获取第一个匹配元素的值，无法对应点击的DIV位置。

修正后的完整实现代码 #

PHP + HTML 部分

<?php
// 修正数组定义为PHP标准格式
$array = [15, 20, 50, 23, 10];
?>

<!-- 循环生成可见DIV和隐藏input -->
<?php foreach ($array as $index => $value): 
    $position = $index + 1; // 转换为1开始的位置序号
?>
    <div class="item-div" data-position="<?php echo $position; ?>" data-value="<?php echo $value; ?>">
        位置<?php echo $position; ?>：<?php echo $value; ?>
    </div>
    <!-- 给input设置唯一ID，用索引区分 -->
    <input id="postid-<?php echo $index; ?>" name="postid[]" type="hidden" value="<?php echo $value; ?>">
<?php endforeach; ?>

JavaScript 部分（依赖jQuery）

(function ($) {
    // 绑定所有可见DIV的点击事件
    $(document).on('click', '.item-div', function(e) {
        e.preventDefault();
        // 方式1：直接从DIV的data属性取值（更简洁）
        var postid = $(this).data('value');
        // 方式2：通过索引关联到对应隐藏input取值（符合需求中保留input的要求）
        // var index = $(this).index('.item-div');
        // var postid = $('#postid-' + index).val();
        
        console.log('点击位置' + $(this).data('position') + '，获取值：' + postid);
    });
})(jQuery);

关键改动说明 #

1. 数组定义修正：使用PHP标准的短数组语法[]定义数组，确保语法合法。
2. 唯一标识处理：给每个隐藏input设置带索引后缀的唯一ID（如postid-0、postid-1），同时给DIV添加data-position和data-value属性，方便快速关联位置与值。
3. 事件绑定调整：将点击事件绑定到可见的.item-div类元素，而非隐藏input，符合需求触发逻辑。
4. 值获取逻辑优化：提供两种取值方式——直接从DIV的data属性取值（无需依赖隐藏input），或通过DIV索引关联对应input取值，均可精准匹配点击的元素。

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