主页 / 问题 / 1437017
Accepted
Егор
Asked:2022-08-07 12:03:40 +0000 UTC2022-08-07 12:03:40 +0000 UTC

如何显示属性中的文本？

  • 772

如何从输入字段属性输出文本？由于我这样做了，它只正确显示数字，而不是文本显示 NaN（您需要获取 TEXT），我附上了代码，您可以通过单击 + 来查看它显示的内容：

$('body').on('click', 'button.plus, button.minus', function() {

  var qty = $(this).parent().find('input'),

    name = parseInt(qty.attr('qwe'));
    
  console.log(name);


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="123" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="Текст" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

javascript html

1 个回答

  1. Best Answer

    你所有问题的根源在于：

    • 你正试图勾搭同一个事件
      • 并获得一个数值
      • 并获得一个字符串值
    • 您正在尝试将在语义上彼此完全不同的字符串和数值存储在同一属性中

    因此，您首先收到了属性的数值，并在帮助下parseInt()将其转换为数字。
    但是，然后，使用相同的事件处理程序，您从相同的属性中获得一个字符串（仅在不同的元素中）
    您获得一个字符串，尝试解析它parseInt()并自然地得到一个错误。

    我不知道你的目标到底是什么，所以我将尝试描述几种解决方案。

    选项编号 1

    让我们假设您确实面临这样的情况，您只需要将字符串和整数值都存储在同一个属性中，并在同一个事件处理程序中处理它们。

    那么如何摆脱这种情况呢？
    这很简单：您需要以某种方式确定我们作为输入的数字或字符串。

    为此，我们可以基于一对正则表达式编写一个简单的函数，该函数确定传递的字符串 "是否为数字：

    function isNumeric(str) {
    if(str.match(/^-?\d+$/)) { return true; }
    if(str.match(/^\d+\.\d+$/)) { return true; }
    return false;
}

    因此，稍后我们可以在属性中定义一个数字或仅定义一个字符串，并根据此将整个事物带入一个数字或按原样保存

    var typedAttrValue;
if(isNumeric(qty.attr('qwe'))){
    typedAttrValue = parseInt(qty.attr('qwe'));
} else {
    typedAttrValue = qty.attr('qwe');
}

    好吧，或者一切都一样，只有一行：

    typedAttrValue = isNumeric(qty.attr('qwe')) ? parseInt(qty.attr('qwe')) : qty.attr('qwe');

    注意
    我想注意，您还将事件处理程序附加到布局中的按钮

      <button ... onclick="stepDown()" ...>-</button>
  ...
  <button ... onclick="steUp()" ...>+</button>

    它们不在问题范围内，而且它们也抛出错误，所以我在下面给出两个工作示例，但是：

    • 在其中一个中，我删除onclick="stepDown()"并onclick="steUp()"
    • 在另一个我插入两个空函数stepDown()和steUp()

    没有点击

    function isNumeric(str) {
    if(str.match(/^-?\d+$/)) { return true; }
    if(str.match(/^\d+\.\d+$/)) { return true; }
    return false;
}

$('body').on('click', 'button.plus, button.minus', function() {
    var qty = $(this).parent().find('input'),
    typedAttrValue = isNumeric(qty.attr('qwe')) ? parseInt(qty.attr('qwe')) : qty.attr('qwe');   
    console.log(typedAttrValue);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="123" min="1" max="50" step="1">
  <button type="button" name="valueUp" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="Текст" min="1" max="50" step="1">
  <button type="button" name="valueUp" class="input-number-up  plus">+</button>
</div>

    带 steUp 和 stepDown 插头

    function steUp(event) {
    // здесь Ваша реализация
}
function stepDown(event) {
    // здесь Ваша реализация
}

function isNumeric(str) {
    if(str.match(/^-?\d+$/)) { return true; }
    if(str.match(/^\d+\.\d+$/)) { return true; }
    return false;
}

$('body').on('click', 'button.plus, button.minus', function() {
  var qty = $(this).parent().find('input'),
      typedAttrValue = isNumeric(qty.attr('qwe')) ? parseInt(qty.attr('qwe')) : qty.attr('qwe');   console.log(typedAttrValue);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="123" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe="Текст" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

    选项编号 2

    嗯，第二种选择就是将这些值按不同的属性分开，分别获取

    因此，我只是代替

    qwe="123"

    和

    qwe="Текст"

    在不同的元素中，我只指定两个不同的属性qwe-int和qwe-string

    qwe-int="456" qwe-string="Текст второго элемента"

    然后我分别得到它们，将它们保存在两个不同的变量中，并将其中一个带入一个数字

    var qweInt = parseInt(qty.attr('qwe-int')),
    qweString = qty.attr('qwe-string');

    这里我只指出一个带有stubs的选项（onclick，如果需要，你可以自己去掉）

    function stepDown(event){
   // Здесь ваша реализация данного метода
}
function steUp(event){
   // Здесь ваша реализация данного метода
}
$('body').on('click', 'button.plus, button.minus', function() {

  var qty = $(this).parent().find('input'),
      qweInt = parseInt(qty.attr('qwe-int')),
      qweString = qty.attr('qwe-string');
    
  console.log(qweInt);
  console.log(qweString);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe-int="123" qwe-string="Текст первого элемента" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

<div class="input-number">
  <button type="button" name="valueDown" onclick="stepDown()" class="input-number-down minus">-</button>
  <input class="block" name="kol" type="number" value="13" id="50" qwe-int="456" qwe-string="Текст второго элемента" min="1" max="50" step="1">
  <button type="button" name="valueUp" onclick="steUp()" class="input-number-up  plus">+</button>
</div>

    • 2

相关问题