将文本字段中的数字与数组中的数字进行比较,具体取决于 PHP 和 jQuery 的选择
Compare number in text field with number in an array depending on choice with PHP and jQuery
问题:
选择单选按钮并将文本字段中的数字与数组中的数字进行比较。如果为 true,则不执行任何操作,否则将div 与另一个div 切换。
该 HTML 代码:
<!-- Step 1 - Choose level -->
<label class="control-label">Level:</label>
<label class="radio"><input type="radio" name="level" id="level" value="1">C-level</label>
<label class="radio"><input type="radio" name="level" id="level" value="2">D-level</label>
<!-- Step 2 - This apply only if choice 1 (C-level) is chosen -->
<label class="control-label">Number of authors:</label>
<label class="radio"><input type="radio" name="authors" id="authors" value="1">1 author</label>
<label class="radio"><input type="radio" name="authors" id="authors" value="2">2 authors</label>
<!-- Step 2 - This apply only if choice 2 (D-level) is chosen -->
<label class="control-label">Credits:</label>
<label class="radio"><input type="radio" name="credits" id="credits" value="1">15 credits</label>
<label class="radio"><input type="radio" name="credits" id="credits" value="2">30 credits</label>
<!-- Step 3 - This apply for both choice 1 and 2 -->
<label class="control-label">Type of study:</label>
<label class="radio"><input type="radio" name="study" id="study" value="1">Within</label>
<label class="radio"><input type="radio" name="study" id="study" value="2">Between</label>
<!-- Check the number in this input field against the criteria in $within or $between -->
<label class="control-label">Participants:</label>
<input class="input-small" id="participants" name="participants" type="text">
jQuery代码:
<script type="text/javascript">
$(document).ready(function()
{
var numbers = {
'1': { // whithin
'1': { // C
'1': 36,
'2': 63
},
'2': { // D
'1': 54,
'2': 63
}
},
'2': { // between
'1': { // C
'1': 60,
'2': 105
},
'2': { // D
'1': 90,
'2': 105
}
// ...
}
};
$('#participants').change(function()
{
var choice1 = $('input[name=level]:checked').val();
if (choice1 == '1')
{
var choice2 = $('input[name=authors]:checked').val();
}
else
{
var choice2 = $('input[name=credits]:checked').val();
}
var choice3 = $('input[name=study]:checked').val();
var number = numbers[choice3][choice1][choice2];
if ($(this).val() < number)
{
$('#part').addClass('error');
}
else
{
$('#part').removeClass('error');
}
}
});
</script>
扩展说明:
这个想法是获取每个选择的值并将它们相加以查看它们是否对应于其中一个数组中给出的值。
场景:
- 用户选择"C 级"(值 = 1),然后选择"2 位作者"(值 = 2),连接时等于 12。
- 用户选择"介于"(值=2)并在文本字段中键入数字95(id/名称=数字)。
- 当用户将焦点从文本字段移开时,jQuery应该进行比较。
结果:
jQuery进入数组$between,查找值12,看到它是105。 95 小于且不等于 105,因此 DIV 1 应替换为 DIV 2(同时保留用户键入的值)。
目录代码:
<div id="part" class="control-group">
<label class="control-label">Participants:</label>
<div class="controls">
<div class="input-prepend">
<input class="input-small" id="participants" name="participants" type="text">
</div>
</div>
</div>
如果用户键入不同的值并移动焦点,则应重新计算。如果文本字段中的值等于或高于数组中的值,则不执行任何操作。
任何帮助都值得赞赏,如果我没有真正卡住,我就不会输入这个!提前谢谢。
var numbers = {
'1': { // whithin
'1': { // C
'1': 36,
'2': 63
},
'2': { // D
'1': 54,
'2': 63
}
},
'2': { // between
// ...
}
};
$('#number').change(function() {
var choice1 = $('input[name=level]:checked').val();
if (choice1 == '1') {
var choice2 = $('input[name=authors]:checked').val();
} else {
var choice2 = $('input[name=credits]:checked').val();
}
var choice3 = $('input[name=study]:checked').val();
var number = numbers[choice3][choice1][choice2];
if ($(this).val() < number) {
$('#yourDiv').addClass('error');
} else {
$('#yourDiv').removeClass('error');
}
});
我建议使用字符串而不是 1/2 - 它更容易理解且不易出错。
如果该 PHP 数组是动态的,您可以使用函数 json_encode 设置 javascript 数组:
<script>
var numbers = <?php echo json_encode($numbers); ?>;
// rest of code
</script>
相关文章:
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 测试索引值是否等于某个数字的倍数
- 将数字转换为一定数量的硬币
- 键入最后一位数字后自动提交
- 如何在javascript中迭代数字列表
- Javascript逻辑运算符和字符串/数字
- 如何在javascript中获得与特定数字相等的随机数
- 如果元素's的ID以数字开头
- 递增一个数字而不去掉前导零
- 如何使用JavaScript查找1和N之间的所有数字的总和
- 如何在这里将两个值最低的数字相加
- 如何删除除冒号、数字和'上午'或者'下午'
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- Javascript排序字符串或数字
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- 我想创建一个长度取决于用户输入的数组,然后尝试找到数组中所有数字的总和
- 将文本字段中的数字与数组中的数字进行比较,具体取决于 PHP 和 jQuery 的选择
- for 循环取决于数字输入
- 加上两个数字,然后减去数字取决于复选框
- 在js表单上,如何隐藏/显示单选按钮(一组3个按钮中的一个或两个)取决于在上面字段中输入的数字的值