我有一个网站,允许用户“猜测/预测”体育比赛的结果
为了让您了解我想要实现的目标,请查看以下图片:
选定的小组会显示在页面底部(正如您在图片的底部圆圈中看到的那样)
我想做什么
我试图修改脚本,不仅在页面底部显示选定的团队,而且 也是选定的分数
示例
12岁以下的酋长
Have a look at my fiddle了解我在做什么,如果有人可以帮我修改我的脚本以包含分数,那将非常感激
我的代码:
$(document).ready(function() {
$(':radio').change(function(e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function(ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br/>
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br/>
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="dispPicks"></div>
答案 0 :(得分:6)
您可以在div
中放置相关的单选按钮并选择框,然后为其分配一个类,让我们说team
,然后读取选中的单选按钮和选中框的值,与选中的收音机相同按钮belogs到。见下面的代码 -
HTML
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div id="dispPicks"></div>
JQuery的
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
});
});
<强> JSfiddle Demo
答案 1 :(得分:2)
我做了一些我认为必不可少的修改:
1。,因为一支球队无法以0的分数获胜,0是在选择框之外
2。我根据其单选按钮的名称为所有select
代码data-name
提供了
然后我们去 DEMO
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var name=$(this).attr('name');
if($(this).val()=='Draw'){
$('#dispPicks').append($(ele).val());
}
else{
$('#dispPicks').append($(ele).val() + ' by '+$('select[data-name='+name+']').val() + '<br>');
}
});
});
});
答案 2 :(得分:1)
我认为你要使用更多的id和名字。 这就是我为你所做的,让你理解我的意思是基本的:
$(':radio').change(function(e) {
x = $(this).attr('name');
y = $('input[name=' + x + ']:checked').val();
$("#" + x).html(y);
});
$("select").change(function() {
x = $(this).attr('name');
y = $(this).val();
$("#" + x).html(" by " + y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="pick1" value="Shaks" />
<input type="radio" name="pick1" value="Hurricanes" />
<input type="radio" name="pick1" value="Draw" />
<select name="howMuch1">
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="radio" name="pick2" value="Chelsea" />
<input type="radio" name="pick2" value="Liverpool" />
<input type="radio" name="pick2" value="Draw" />
<select name="howMuch2">
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="picks">
<br /><span id="pick1"></span><span id="howMuch1"></span>
<br /><span id="pick2"></span><span id="howMuch2"></span>
</div>
在事件(变更)上我们使x成为我们的目标而y是我们的价值..休息是一个正确的情况;)