我正在制作一个fifa风格的html,其中两个玩家必须选择一个团队。
我使用2个旋转木马,所有球队都作为图像,我希望所选的图像(球队(作为信息存储在表格中,以便稍后用于显示某些球员,我该怎么做?
我使用了隐藏的输入,但所有团队都存储在表单中,而不是活动的表单中。
这是我目前的一个旋转木马代码:
<div class="row team-container">
<div id="carouselExampleInterval" class="carousel slide col-3 team-box" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img name='idTeam' src="/images/Select1.png" class="d-block w-100" value='1'>
<input id="idTeam" name='idTeamH' type="hidden" value="1">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select2.png" class="d-block w-100" value='2'>
<input id="idTeam" name='idTeamH' type="hidden" value="2">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select3.png" class="d-block w-100" value='3'>
<input id="idTeam" name='idTeamH' type="hidden" value="3">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select4.png" class="d-block w-100" value='4'>
<input id="idTeam" name='idTeamH' type="hidden" value="4">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select5.png" class="d-block w-100" value='5'>
<input id="idTeam" name='idTeamH' type="hidden" value="5">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select6.png" class="d-block w-100" value='6'>
<input id="idTeam" name='idTeamH' type="hidden" value="6">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select7.png" class="d-block w-100" value='7'>
<input id="idTeam" name='idTeamH' type="hidden" value="7">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select8.png" class="d-block w-100" value='8'>
<input id="idTeam" name='idTeamH' type="hidden" value="8">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select9.png" class="d-block w-100" value='9'>
<input id="idTeam" name='idTeamH' type="hidden" value="9">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select10.png" class="d-block w-100" value='10'>
<input id="idTeam" name='idTeamH' type="hidden" value="10">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select11.png" class="d-block w-100" value='11'>
<input id="idTeam" name='idTeamH' type="hidden" value="11">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select12.png" class="d-block w-100" value='12'>
<input id="idTeam" name='idTeamH' type="hidden" value="12">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select13.png" class="d-block w-100" value='13'>
<input id="idTeam" name='idTeamH' type="hidden" value="13">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select14.png" class="d-block w-100" value='14'>
<input id="idTeam" name='idTeamH' type="hidden" value="14">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select15.png" class="d-block w-100" value='15'>
<input id="idTeam" name='idTeamH' type="hidden" value="15">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select16.png" class="d-block w-100" value='16'>
<input id="idTeam" name='idTeamH' type="hidden" value="16">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select17.png" class="d-block w-100" value='17'>
<input id="idTeam" name='idTeamH' type="hidden" value="17">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select18.png" class="d-block w-100" value='18'>
<input id="idTeam" name='idTeamH' type="hidden" value="18">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select19.png" class="d-block w-100" value='19'>
<input id="idTeam" name='idTeamH' type="hidden" value="19">
</div>
<div class="carousel-item">
<img name='idTeam' src="/images/Select20.png" class="d-block w-100" value='20'>
<input id="idTeam" name='idTeamH' type="hidden" value="20">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
查看以下片段:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function selectPlayer(player_img){
document.myForm.selected_player.value = player_img.id;
}
</script>
</head>
<body>
<div class="row team-container">
<div id="carouselExampleInterval" class="carousel slide col-3 team-box" data-interval="false">
<div class="carousel-inner">
<form name="myForm">
<div class="carousel-item active">
<img id='idTeam_1' src="/images/Select1.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_2' src="/images/Select2.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_3' src="/images/Select3.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_4' src="/images/Select4.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_5' src="/images/Select5.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_6' src="/images/Select6.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_7' src="/images/Select7.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_8' src="/images/Select8.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_9' src="/images/Select9.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_10' src="/images/Select10.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_11' src="/images/Select11.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_12' src="/images/Select12.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_13' src="/images/Select13.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_14' src="/images/Select14.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_15' src="/images/Select15.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_16' src="/images/Select16.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_17' src="/images/Select17.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_18' src="/images/Select18.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_19' src="/images/Select19.png" class="d-block w-100 idTeam" onclick="selectPlayer(this);">
</div>
<div class="carousel-item">
<img id='idTeam_' src="/images/Select20.png" class="d-block w-100 idTeam" value='20' onclick="selectPlayer(this);">
</div>
<input id="idTeam_20" name='selected_player' type="hidden">
</form>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
我采取了以下步骤来解决问题以及改进代码:
- 我们需要
<form>
来访问我们的<input type="hidden">
,所以在<div class="carousel-inner">
中创建表单 - 只有一个单一的信息,即选择了哪个玩家,我们需要单个
<input type="hidden">
而不是20,所以删除了额外的<input type="hidden">
,并将其放置在<form name="myForm">
中 name
和value
不适用于<img>
,除非我们不进行andy图像映射,所以我删除了它们- 为所有
<img>
元素指定唯一的id - 在JavaScript内部创建的函数
selectPlayer
采用单个参数。我们曾经通过该参数传递图像,并将其id存储在<input type="hidden">
中 - 点击玩家图像时调用我们的函数
selectPlayer
,并将图像作为参数传递