将Div的newprice属性值同步到Input的显示值与源码值

问题背景 #

点击带有.uzmi类的Div元素时，需要将Div的newprice属性值同步设置给id为inid的Input，要求同时更新Input的视觉显示值和页面源码中的value属性值。原代码仅能改变视觉显示，核心问题出在选择器错误和属性更新不彻底。

原代码错误点 #

• jQuery选择器错误：选中Input时缺少id选择器前缀#，原代码$("inid")无法定位到目标元素，应改为$("#inid")
• 属性更新不完整：仅使用.val()方法只能更新Input的当前显示值，若要同步修改源码中的value属性，需要额外调用.attr('value', ...)方法

修正后的代码 #

JS代码 #

$(".uzmi").on("click", function(e) {
  const newPrice = $(this).attr('newprice').trim(); // 去除属性值前后冗余空格
  const $targetInput = $("#inid");
  $targetInput.val(newPrice); // 更新Input的视觉显示值
  $targetInput.attr('value', newPrice); // 同步修改源码中的value属性
});

优化后的HTML代码（修正语法问题） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-value="VALUE 1" class="uzmi product-variation-colors__item helmet-variations" codeproduct="" newprice="6043" variation_id="1407"> Div 1</div>
<div data-value="VALUE 1" class="uzmi product-variation-colors__item helmet-variations" codeproduct="" newprice="2323" variation_id="1407"> Div 2</div>
<div data-value="VALUE 1" class="uzmi product-variation-colors__item helmet-variations" codeproduct="" newprice="9999" variation_id="1407"> Div 3</div>
<input type="text" id="inid" name="variation_id" class="variation_id" value="6041" />

额外说明 #

• 给Input补充了type="text"属性（原代码type为空属于语法错误）
• 移除了HTML中无效的change_img(0)属性和属性值前后的多余空格，避免干扰属性读取
• 使用.trim()处理newprice属性值，防止因属性值带空格导致的赋值错误

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