单击按钮时使用动态输入ID清除输入文本区域-jQuery

扎克

尽管问题标题给我留下了一个想问一个问题的印象,但是目前我面临两个问题。

关于如何在单击按钮时清除输入文本区域,我经历了一些类似的问题,但其中大多数是针对固定输入类或ID的。

问题1:我正在动态生成行,并且所有字段都使用JS填充,因此所有文本框的输入ID都不相同。现在,如果用户在“应用于所有”输入字段中输入一些数字,然后单击按钮,则应将相同的数字设置为在投注单中添加的所有行。

问题2:在投注单输入框中输入单个值后,如果单击“全部清除”按钮,则为问题2。它应该清除在投注单中较早输入的所有输入。

这是HTML结构

<div id="bets">
  <div id="idNo1" class="bet gray2" name="singleBet">
    <div class="left">
      <p class="title">
        <p class="supermid">
          <input id="input_1" type="text">
    </div>
  </div>
  <div id="idNo2" class="bet gray2" name="singleBet">
    <div class="left">
      <p class="title">
        <p class="supermid">
          <input id="input_2" type="text">
    </div>
  </div>
  <div id="idNo3" class="bet gray2" name="singleBet">
    <div class="left">
      <p class="title">
        <p class="supermid">
          <input id="input_3" type="text">
    </div>
  </div>
</div>

JS,用于在单个投注中添加元素

function createSingleBetDiv(betInfo) {
    var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
        div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
        a =  createA(null, null, null, 'right orange'),
        leftDiv = createDiv(null, null, 'left'),
        closeDiv = createDiv(null, null, 'icon_shut_bet'),
        singleBetNumber = ++document.getElementsByName('singleBet').length;

    // Info abt the bet
    $(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');
    var raceInfo = "";
    $("#raceInfo").contents().filter(function () {
        if (this.nodeType === 3) raceInfo = $(this).text() + ',&nbsp;' + betInfo['betTypeName'] + ' (' + betInfo['value'].toFixed(2) + ')';
    });
    $(leftDiv).append('<p class="title">' + raceInfo + '</p>');

    // Closing btn
    (function(id) {
        a.onclick=function() {
            removeSingleBet(id + '_div');
        };
    })(id);
    $(a).append(closeDiv);

    // Creating input field - This is where I am creating the input fields
    $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text" class="betInput"></p>');

    // Creating WIN / PLACE checkbox selection
    $(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');

    // Append left part
    $(div).append(leftDiv);
    // Append right part
    $(div).append(a);
    // Appending div with data
    $.data(div, 'mapForBet', betInfo);

    return div;
}

适用于所有和清除所有按钮的HTML

<a href="javascript: applyToAllBetInput()"class="button apply orange">APPLY TO ALL <input type="text"> </a>

<a href="javascript: clearAllBetInput()" class="button clearall gray">CLEAR ALL</a>

我需要实现这两个功能的JS

function applyToAllBetInput() {
    $('.apply').change(function() {
        $(this).prevAll().find('input[type=text]').val($(this).val());
    });
}

function clearAllBetInput() {
    $('.clearall').click(function() {
        $('div.bet').find('input').val('');
    });
}
恢复Monica Cellio

最好的办法是从链接中删除内联事件处理程序,像这样...

<a href="#" class="button apply orange">APPLY TO ALL <input type="text"> </a>

<a href="#" class="button clearall gray">CLEAR ALL</a>

然后,在脚本中分配事件处理程序...

$("a.button.apply").on("click", function(e) {
    e.preventDefault();
    applyToAllBetInput($(this).find("input").val());
});

$("a.button.clearall").on("click", function(e) {
    e.preventDefault();
    applyToAllBetInput("");
});

这会将值应用于所有输入...

function applyToAllBetInput(value) {
    $("#bets div[name=singleBet] .supermid input:text").val(value);
}

如果将一个参数传递给它applyToAllBetInput,然后用该参数设置输入,那么您只需要一个函数,因为它们都做相同的事情,但是具有不同的值。如果只做一件事,最好只拥有一小段代码,那么如果将来事情发生变化,则只需要修复一次即可:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击按钮时使用动态输入ID清除输入文本区域-jQuery

来自分类Dev

jQuery .val('')不会清除文本区域输入

来自分类Dev

使用不同输入形式(输入和文本区域)时的jQuery验证器问题

来自分类Dev

如何使用jQuery拖动文本区域和输入

来自分类Dev

如何使用jquery更改单击时输入按钮的文本?

来自分类Dev

使用 jQuery 单击按钮时无法显示输入中的文本

来自分类Dev

jQuery Validate插件:输入与文本区域

来自分类Dev

如何使用jQuery清除文本区域

来自分类Dev

如何在javascript或jquery中清除表单字段(输入,文本区域,选择和单选)

来自分类Dev

jQuery文本区域调整大小无法与单选按钮单击时的jQuery div内容更改结合使用

来自分类Dev

JQuery:尝试在单击按钮时将数字附加到文本区域

来自分类Dev

文本区域上的切换按钮单击jQuery

来自分类Dev

验证使用Javascript / jquery在文本区域中输入的多封电子邮件

来自分类Dev

验证使用Javascript / jquery在文本区域中输入的多封电子邮件

来自分类Dev

单击单选按钮时禁用或启用文本输入表单,使用 Jquery

来自分类Dev

当用户使用jquery聚焦到文本区域时显示按钮

来自分类Dev

jQuery在单击按钮时获取输入值

来自分类Dev

使用javascript或jquery动态引用输入文本框ID

来自分类Dev

jQuery用户输入的按钮单击

来自分类Dev

按键输入按钮单击 jQuery

来自分类Dev

使用jQuery提交多个文本区域

来自分类Dev

单击提交按钮后输入文本区域的文本

来自分类Dev

jQuery-在选择更改时清除文本区域

来自分类Dev

jQuery将输入更改为具有属性和属性值的文本区域

来自分类Dev

jQuery:将多个用户输入合并到一个文本区域中?

来自分类Dev

jQuery:将多个用户输入合并到一个文本区域中?

来自分类Dev

jQuery - 检查输入,文本区域的值是否在同一函数中选择不为空

来自分类Dev

使用jquery从动态创建的输入字段访问输入文本

来自分类Dev

Bootstrap jQuery按钮并单击以切换文本/输入字段

Related 相关文章

  1. 1

    单击按钮时使用动态输入ID清除输入文本区域-jQuery

  2. 2

    jQuery .val('')不会清除文本区域输入

  3. 3

    使用不同输入形式(输入和文本区域)时的jQuery验证器问题

  4. 4

    如何使用jQuery拖动文本区域和输入

  5. 5

    如何使用jquery更改单击时输入按钮的文本?

  6. 6

    使用 jQuery 单击按钮时无法显示输入中的文本

  7. 7

    jQuery Validate插件:输入与文本区域

  8. 8

    如何使用jQuery清除文本区域

  9. 9

    如何在javascript或jquery中清除表单字段(输入,文本区域,选择和单选)

  10. 10

    jQuery文本区域调整大小无法与单选按钮单击时的jQuery div内容更改结合使用

  11. 11

    JQuery:尝试在单击按钮时将数字附加到文本区域

  12. 12

    文本区域上的切换按钮单击jQuery

  13. 13

    验证使用Javascript / jquery在文本区域中输入的多封电子邮件

  14. 14

    验证使用Javascript / jquery在文本区域中输入的多封电子邮件

  15. 15

    单击单选按钮时禁用或启用文本输入表单,使用 Jquery

  16. 16

    当用户使用jquery聚焦到文本区域时显示按钮

  17. 17

    jQuery在单击按钮时获取输入值

  18. 18

    使用javascript或jquery动态引用输入文本框ID

  19. 19

    jQuery用户输入的按钮单击

  20. 20

    按键输入按钮单击 jQuery

  21. 21

    使用jQuery提交多个文本区域

  22. 22

    单击提交按钮后输入文本区域的文本

  23. 23

    jQuery-在选择更改时清除文本区域

  24. 24

    jQuery将输入更改为具有属性和属性值的文本区域

  25. 25

    jQuery:将多个用户输入合并到一个文本区域中?

  26. 26

    jQuery:将多个用户输入合并到一个文本区域中?

  27. 27

    jQuery - 检查输入,文本区域的值是否在同一函数中选择不为空

  28. 28

    使用jquery从动态创建的输入字段访问输入文本

  29. 29

    Bootstrap jQuery按钮并单击以切换文本/输入字段

热门标签

归档