使用jQuery根据输入元素的数据属性更改文本

8xiog9wr 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(130)

我尝试使用jQuery根据input属性的值更改段落文本。如果输入data-number值小于50，则将段落文本更改为50$。我不知道如何设置data-number值。

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

jquery

来源：https://stackoverflow.com/questions/50253409/change-text-based-on-data-attribute-of-input-element-with-jquery

2条答案

按热度按时间

bnlyeluc1#

如果要有多个input元素，则必须使用.each()。
下面是一个工作片段：

$('input[data-number]').each(function() {
  if ($(this).data('number') < 50) {
    $(this).siblings('p').html('50$');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>5$</p>
  <input data-number="4.673001" />
</div>

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

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

请注意，input不需要关闭标记，因为它是一个自关闭元素。
关于我在这个片段中使用的函数的一些文档：
http://api.jquery.com/jquery.each/
http://api.jquery.com/data/（也可以用http://api.jquery.com/attr/完成）
https://api.jquery.com/siblings/
希望能帮上忙。