Question

虽然问题标题给人的印象是我想问一个问题，但目前我遇到了两个问题。

关于如何在按钮点击时清除输入文本区域，我遇到了一些类似的问题，但大多数是针对固定输入类或id的。

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

问题2：在betslip输入框中输入单个值后，如果单击“全部清除”按钮。它应该清除投注单中早先输入的所有输入。

这是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 for Apply to all and Clear all按钮

<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('');
    });
}

Answer 1

最好的办法是从链接中删除内联事件处理程序，例如......

<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，然后使用该参数设置输入，那么您只需要一个函数，因为它们都执行相同的操作，但具有不同的值。最好只有1位代码，如果它只做一件事，那么如果将来发生变化，你只需修复一次：）

Answer 2

在开始编写代码之前，我有几个一般的建议。首先，为什么在使用jQuery时使用速记JavaScript？例如：

inputId = divId.document.getElementById('input');

应该简单：

inputId = $(inputId).find('input');

（或类似的东西 - 我不确定你追求的是什么。）

接下来，您将使用内联点击处理程序。相反，请使用事件侦听器：

<a href="javascript: applyToAllBetInput()" ...

应该是

$('a#my-id').click(function() { ... }

最后，您可以使用这样的选择器定位所有输入以进行清算：

$('div.bet').find('input').val('');

Answer 3

请用你的实际按钮/ textarea id替换我给出的id（给你的元素提供ID）。

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

 $('#btnClearAll').click(function() {
    $('#txtApplyToAll').prevAll().find('input[type=text].val('');
});

在按钮单击 - jQuery上清除动态输入id的输入文本区域

3 个答案: