Javascript / Jquery帮助 - 从选择菜单调用函数-Java 学习之路

我需要一些帮助，为此页面添加交互性 . 我是jQuery的新手，这个东西可能很简单，但它让我疯了！

它只是一个足球队，不同的球员细节存储在一个名为Squad_list的数组中的对象 Squad_List.js

var squad = [
  {
  number: 1,
  pic: 'img/HIBBERD_M_t.png',
  name: 'Michael',
  surname: 'Hibberd',
  height: '186 cm',
  weight: '86 kg',
  debut: 2011,
  position: ['defender'],
  games: 85,
  goals: 11  
  },
  {
  number: 2,
  pic: 'img/BELLCHAMBERS_T_t.png',
  name: 'Tom',
  surname: 'Bellchambers',
  height: '202 cm',
  weight: '106 kg',
  debut: 2008,
  position: ['ruck'],
  games: 79,
  goals: 53  
  },
  {
  number: 3,
  pic: 'img/CHAPMAN_P_t.png',
  name: 'Paul',
  surname: 'Chapman',
  height: '179 cm',
  weight: '87 kg',
  debut: 2000,
  position: ['foward'],
  games: 280,
  goals: 366,
  goals15: 8  
  },
];

等等

我有不同的功能来根据不同的位置，玩游戏等从Squad_List创建一个listQuery，即addListDefender创建一个名为position = defender的玩家列表

我有一个drawtable函数将信息写入页面

我有一个选择菜单来选择不同的listQuery选项，它应该调用相关的listQuery函数命名的值

App.js

var listQuery = [];


// Draw table from 'listQuery' array of objects
function drawTable(tbody) {
    var tr, td;
    tbody = document.getElementById(tbody);
    // loop through data source
    //    document.write(tbody);

    for (var i = 0; i < listQuery.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = "<p>" + listQuery[i].number + "</p>";
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = '<img src="' + listQuery[i].pic + '">';
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].name + " " + listQuery[i].surname;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].height;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].weight;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].debut;
        td = tr.insertCell(tr.cells.length);
        if  (listQuery[i].position.length > 1) { 
          td.innerHTML += listQuery[i].position[0] + " / " + listQuery[i].position[1]; 
          }  else {
          td.innerHTML += listQuery[i].position;
        }    
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].games;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = listQuery[i].goals;
        td = tr.insertCell(tr.cells.length);
}

}


//Display entire list

var displayList = function() {
    listQuery = squad;
};


//Take players from list that position = foward

var addListFoward = function() {
  for (i = 0; i < squad.length; i++) {
    if (squad[i].position.indexOf("foward") >= 0) {
      listQuery.push(squad[i]);
      console.log(squad[i]);
    }  
  }
}


//Take players from list whose position = defender

var addListDefender = function() {
  for (i = 0; i < squad.length; i++) {
    if (squad[i].position === "defender") {
      listQuery.push(squad[i]);
      console.log(squad[i]);
    }
  }
}

//Take 10 items from player list in order of most games
var addListGames = function () {
  squad.sort(function(a, b){
     return b.games-a.games
  })
  listQuery = squad;
  listQuery.length = 10;
 }

// Site starts with Display Entire List
displayList();
drawTable("output");

//Generate list query on change select button from select options value

$('#select').change(function() {


});

//display selection from select button onclick go button

$('#go').click(function() {
//  alert("go has been click!");  

   drawTable("output");
});

基本上当选择菜单改变时我想调用一个等于选择值的函数，然后用go按钮重绘表格.....但是我尝试过各种各样的东西$（'#select'）和$ （'#go'）不起作用 .

任何帮助非常感谢!!!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta cahrset="UTF-8">
  <title>Bombers Squad</title>
  <link rel="stylesheet" href="css/styles.css">  
</head>
<body>
<div class="header">
  <div class="main-title">
    <h1>Bombers Squad</h1>
  </div>
  <div class="logo">
    <img src="img/logo-2x.png" alt="Bombers logo">
  </div>
</div>
<div class="main-field">
  <form>
  <label for="select">View Bombers Squad:</label>
  <select id="select" name="bombers_list">
    <option value="displayList">Display Entire List</option>
    <option value="addListFoward">Display Fowards</option>
    <option value="addListMidfield">Display Midfielders</option>
    <option value="addListDefender">Display Defenders</option>
    <option value="addListRuck">Display Rucks</option>
    <option value="addListGames">Display Most Games</option>
    <option value="addGoals2015">2015 Goal kickers</option>
    <option value="addBF2015">2015 Best & Fairest Votes</option>    
  </select>  
  <button id="go" type="submit">Go</button> 
  </form>  
  <table id="players">
    <caption>Player Information</caption>
    <thead>
      <tr>
        <th scope="col">Number</th>
        <th scope="col">Picture</th>
        <th scope="col">Name</th>      
        <th scope="col">Height</th>   
        <th scope="col">Weight</th>   
        <th scope="col">Debut</th>   
        <th scope="col">Position</th>   
        <th scope="col">Games</th>  
        <th scope="col">Goals</th> 
      </tr>
    </thead>
    <tbody id="output">
    </tbody>
  </table>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
<script src="js/squad_list.js"></script>
<script src="js/app.js"></script>    
</body>
</html>

JsFidder

1 回答

似乎你忘了包含jquery或没有正确引用

检查以下Answer & working demo

或者只是添加

$(function(){
$('#select').change(function () {


});

//display selection from select button onclick go button

$('#go').click(function () {
      alert("go has been click!");  

    drawTable("output");
});

})

回复于 2024-05-16T07:53:00+08:00

Javascript / Jquery帮助 - 从选择菜单调用函数

1 回答

相关问题