如何用jQuery根据input的data-number属性值修改段落文本

没问题，我来帮你搞定这个需求！其实用jQuery获取data-number属性非常简单，这里给你两种常用方法，再附上完整的实现代码：

完整实现代码 #

<div> 
  <p>5$</p> 
  <input data-number="4.673001"> 
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 方式1：用jQuery的data()方法（推荐，自动解析数据类型）
  const num = $('input').data('number');
  
  // 方式2：用attr()方法获取属性字符串，再转成数字
  // const num = parseFloat($('input').attr('data-number'));
  
  // 判断数值并修改段落文本
  if (num < 50) {
    $('div p').text('50$');
  }
});
</script>

关键步骤解释 #

• 确保DOM加载完成：$(document).ready()是为了保证我们操作的元素已经被浏览器渲染出来，避免出现找不到元素的情况。
• 获取data属性值：
  • data('number')是jQuery专门处理data-*属性的方法，它会自动把属性值转换成对应的类型（比如你的4.673001会直接变成Number类型），非常省心。
  • 如果用attr('data-number')，拿到的是字符串，所以需要用parseFloat()把它转换成浮点数，才能和50做数值比较。
• 修改段落文本：用text()方法替换p标签里的内容，直接传入你想要的50$即可。

小提示 #

如果页面上有多个input元素，建议给目标input加个类名（比如<input class="target-input" data-number="4.673001">），然后用$('.target-input')来选择，这样就不会误操作其他input啦～

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