清除输入文本区域与动态输入ID的按钮点击 - jQuery

Question

尽管问题标题给人的印象是我想问一个问题，但目前我面临两个问题。

我已经经历了几个类似的问题，关于如何清除按钮单击上的输入文本区域，但其中大多数是固定输入类或ID的。

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

问题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为适用于所有和清除所有按钮

<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那里我需要实现那2个功能

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位的代码，如果它只做1件事，那么你只需要修复它一次，如果事情在未来的变化:)

Answer 2

甚至在开始编写代码之前，我都会提出几个一般建议。首先，当你有jQuery可用时，为什么使用longhand 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

请更换ID的我已经给你实际的按钮/ textarea id（给你的元素ID）。

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

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