jQuery |当多个相同的ID时显示值 [英] jQuery | Getting display of value when there is multiple of the same ID
问题描述
我有一个jQuery函数(如下:
I have a jQuery function (follows:
$(this).ready(function () {
$("#stake").on('keyup', function () {
var newVal = (parseFloat($("#stake").val(), 10) * parseFloat($('#__odds').val(), 10)) + parseFloat($("#stake").val(), 10) || 0;
$("#showdynamicreturn").val(parseFloat(newVal).toFixed(2));
});
});
)，并且我有多个具有相同ID的属性，这意味着我需要获取允许多于一件事情对其进行更改的函数，解决此问题的最佳方法是什么?
我还希望将新值添加到showdynamicreturn区域中显示的每个键入的值上，我该怎么做?
) and I have more than one attribute with the same ID, this means that I need to get the function to allow for more than one thing to change it, what is the best way to go about this?
Also I want the new value to be added to the value displayed in the showdynamicreturn area for each one that is typed in, how do I do this?
示例
1)用户输入1-返回f 2
2)用户输入2-返回4
显示在showdynamicreturn-6
Example
1) User input 1 - return f 2
2) User input 2 - return of 4
Displayed in showdynamicreturn - 6
此处的HTML代码
HTML code here
<div style="border: 1pt solid black; width: 99%;">
<h2>1:55 Scottsville - Win</h2>
<form action="/sports/football/" method="post">
<table>
<tbody>
<tr>
<td style="width: 50%;">Sport: </td>
<td>Horse Racing</td>
</tr>
<tr>
<td style="width: 50%">Participant: </td>
<td>Legend Dancer</td>
</tr>
<tr>
<td>Market: </td>
<td>Scottsville</td>
</tr>
<tr>
<td>Time: </td>
<td>13:55</td>
</tr>
<tr>
<td>Odds: </td>
<td>8/1<input type="hidden" value="8" id="__odds"></td>
</tr>
<tr>
<td>Stake: </td>
<td>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">£</span><input style="width: 100%" type="text" name="stake" id="stake" aria-describedby="basic-addon1" placeholder="Stake"></div>
</td>
</tr>
<tr>
<td>
<center><label for="eachWay">Each way bet? </label><input type="checkbox" id="eachWay" name="eachWay"></center>
</td>
<td>
<center><input type="submit" name="submitTo__OpenBets" value="Open Bet"></center>
</td>
</tr>
<input type="hidden" name="betslip_id" value="36"><input type="hidden" name="sport" value="football"><input type="hidden" name="odds" value="8/1"><input type="hidden" name="sport" value="Horse Racing"><input type="hidden" name="bettilldate" value="2015-05-13"><input type="hidden" name="bettilltime" value="13:55:00">
<tr>
<td colspan="100%">
<center><input type="submit" name="delete_betslip_item" value="Delete this bet"></center>
</td>
</tr>
</tbody>
</table>
</form>
</div>
生成代码:
Generating code:
public function ReadBets_Bet($id, $currentpage, $loggedIn = true) {
$queryBase = "SELECT * FROM `vr_wp_bets` WHERE `id` = '%s' AND `is_open` = 'false' ORDER BY `sport` ASC;";
if ($loggedIn == true) {
$queryBase2 = sprintf($queryBase, $id);
}
else {
$queryBase2 = sprintf($queryBase, $id);
}
$selectQuery = mysql_query($queryBase2);
$return = "<div style='max-height: 400px; overflow: scroll;'>";
while ($result = mysql_fetch_array($selectQuery)) {
$_odds = explode("/", $result['odds']);
$odds = $_odds[0] / $_odds[1];
$return .= "<div style='border: 1pt solid black; width: 99%;'>";
$return .= "<h2>" . $result['title'] . "</h2>";
$return .= "<form action='/sports/" . CURRENT_PAGE . "/' method='post'>";
$return .= "<table>";
$return .= "<tr><td style='width:50%;'>Sport: </td><td>" . $result['sport'] . "</td></tr>";
$return .= "<tr><td style='width:50%'>Participant: </td><td>" . stripslashes($result['participant']) . "</td></tr>";
$return .= "<tr><td>Market: </td><td>" . stripslashes($result['market']) . "</td></tr>";
$return .= "<tr><td>Time: </td><td>" . date("H:i", strtotime($result['bettilltime'])) . "</td></tr>";
$return .= "<tr><td>Odds: </td><td>" . $result['odds'] . "<input type='hidden' value='" . $odds . "' id='__odds' /></td></tr>";
$return .= "<tr><td>Stake: </td><td><div class='input-group'><span class='input-group-addon' id='basic-addon1'>£</span><input style='width:100%' type='text' name='stake' id='stake' aria-describedby='basic-addon1' placeholder='Stake' /></div></td></tr>";
if ($result['ew_available'] == "true") {
$return .= "<tr><td><center><label for='eachWay'>Each way bet? </label><input type='checkbox' id='eachWay' name='eachWay' /></center></td>" . "<td><center><input type='submit' name='submitTo__OpenBets' value='Open Bet' /></center></td></tr>";
}
else {
$return .= "<tr><td colspan='10'><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
}
$return .= "<!-- Hidden fields for the horses information. -->";
$return .= "<input type='hidden' name='betslip_id' value='" . $result['bet_id'] . "' />";
$return .= "<input type='hidden' name='sport' value='" . $currentpage . "' />";
$return .= "<input type='hidden' name='odds' value='" . $result['odds'] . "' />";
$return .= "<input type='hidden' name='sport' value='" . $result['sport'] . "' />";
$return .= "<input type='hidden' name='bettilldate' value='" . $result['bettilldate'] . "' />";
$return .= "<input type='hidden' name='bettilltime' value='" . $result['bettilltime'] . "' />";
$return .= "<!-- Area to \"submit a delete\" and remove an item from the bet slip. -->";
$return .= "<tr><td colspan='100%'><center><input type='submit' name='delete_betslip_item' value='Delete this bet' /></center></td></tr>";
$return .= "</table>";
$return .= "</form>";
$return .= "</div><br>";
}
$return .= "</div>";
$return .= "<tr id='dynamic_return'><td colspan='10'><center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>£</span><input style='width:100%' type='text' id='showdynamicreturn' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center></td></tr>";
//$return .= $queryBase2;
return $return;
}
注意
出于客户的需要和要求，使用了mysql_ *函数(是的，我知道已贬值).
NOTE
mysql_* functions are used (yes I know depreciated) due to client needs and requirements.
EDIT
EDIT
我现在拥有的jQuery:
The jQuery I now have:
var count_div = 0;
$(this).ready(function () {
$("div").each(function () {
++count_div;
console.log("Counter: " + count_div);
});
for (var i = 0; i < count_div; ++i) {
$("#stake-" + i).each(function () {
console.log("Found stake " + i);
});
}
for (var i = 0; i < count_div; ++i) {
$("#__odds-" + i).each(function () {
console.log("Found stake " + i);
});
}
$("#showdynamicreturn").each(function () {
console.log("Found text area");
});
for (var i = 0; i < count_div; ++i) {
$("#stake-" + i).on('keyup', function () {
var newVal = (parseFloat($("#stake-" + i).val(), 10) * parseFloat($("#__odds-" + i).val(), 10)) + parseFloat($("#stake-" + i).val(), 10) || 0;
$("#showdynamicreturn").val(parseFloat(newVal).toFixed(2));
});
}
});
推荐答案
You can't do that, as IDs must be unique within the tree (stated in the spec at 3.2.5.1).
如果存在重复的ID(大多数浏览器会允许)，则ID的返回顺序最多是不确定的，而在最坏的情况下，您只会检索单个元素.
When duplicate IDs are present -- which most browsers will permit -- the return order of them is at best undefined and at worst you will only retrieve a single element.
最适合您的代码的解决方案是在ID后面附加数字后缀以强制唯一性.您可能可以使用数据中已经存在的唯一标识符，或者，如果有循环，只需保留一个计数器并将其附加到固定字符串即可. foo-1的效果要好于多个foo.
The simplest solution, which should work with your code, is to append a numeric suffix to the ID to enforce uniqueness. You may be able to use a unique identifier that already exists in your data or, if you have a loop, simply keep a counter and append that to a fixed string. foo-1 will work much better than multiple foos.
使用数字ID，您需要将jQ函数修改为类似以下内容:
With numeric IDs, you'll need to modify your jQ function to be something like:
var items = 100;
$(this).ready(function () {
for (var i = 0; i < items; ++i) {
$("#stake-" + i).on('keyup', function () {
var newVal = (parseFloat($("#stake-" + i).val(), 10) * parseFloat($('#__odds').val(), 10)) + parseFloat($("#stake-" + i).val(), 10) || 0;
$("#showdynamicreturn-" + i).val(parseFloat(newVal).toFixed(2));
});
}
});
这篇关于jQuery |当多个相同的ID时显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
