尽管问题标题给我留下了一个想问一个问题的印象,但是目前我面临两个问题。
关于如何在单击按钮时清除输入文本区域,我经历了一些类似的问题,但其中大多数是针对固定输入类或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>. ' + betInfo['horseName'] + '</b></p>');
var raceInfo = "";
$("#raceInfo").contents().filter(function () {
if (this.nodeType === 3) raceInfo = $(this).text() + ', ' + 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('');
});
}
最好的办法是从链接中删除内联事件处理程序,像这样...
<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] 删除。
我来说两句