Question

我正在制作一个应用程序，为在现实生活中玩游戏的玩家填写分数。观众通过单击他在每个回合中击中的位置来跟踪自己的得分。我遇到了两个问题：

如何通过单击区域来填写输入字段。
如何从1号弯转到2号弯等等。

图像被映射到四个扇区

这是脚本：（我在???空格上有一个alert（'test'）;，但这也不起作用。）

$("#test").on("click", function(e) {
  e.preventDefault();
  console.log("here");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="goal" src="http://pngimg.com/uploads/football_goal/football_goal_PNG24.png" usemap="#goal-map">

<map name="goal-map">
        <area id="test" href="#" alt="300 points" title="300" coords="483,50,584,146" shape="rect" />
        <area class="a" href="" alt="300 points" title="300" coords="110,49,11,145" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="13,148,110,238" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="484,149,584,237" shape="rect" />
    </map> 
    <br/>
    
This is the input field that needs to be filled:

<p>Turn 1:
  <input type="text" id="turn1"></p>
<p>Turn 2:
  <input type="text" id="turn2"></p>
<p>Turn 3:
  <input type="text" id="turn3"></p>

Answer 1

快到了-您需要jQuerify目标：

var cnt = 0;
$("#map").on("click", function(e) {
  e.preventDefault();
  cnt++;
  if (cnt > 3) {
    alert("You had your 3 gos");
  }  
  else {
    var $tgt = $(e.target);
    // console.log($tgt.attr("alt"));
    $("#turn"+cnt).val($tgt.attr("title"))
  }  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="goal" src="http://pngimg.com/uploads/football_goal/football_goal_PNG24.png" usemap="#goal-map">

<map name="goal-map" id="map">
        <area id="test" href="#" alt="300 points" title="300" coords="483,50,584,146" shape="rect" />
        <area class="a" href="" alt="300 points" title="300" coords="110,49,11,145" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="13,148,110,238" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="484,149,584,237" shape="rect" />
    </map> 
    <br/>
    
This is the input field that needs to be filled:

<p>Turn 1:
  <input type="text" id="turn1"></p>
<p>Turn 2:
  <input type="text" id="turn2"></p>
<p>Turn 3:
  <input type="text" id="turn3"></p>

通过图像地图区域填写输入字段

1 个答案: