【急募】click()から,直前のselect要素を指定する方法か何か
解決した.【解決】click()から,直前のselect要素を指定する方法か何か - 01647
説明
- ボタン「↑」をクリックしたとき,その直前のselect要素を改変したい
- 関数1個だけで,エレガントに決めたい
- 現状はどのボタンを押してもsonicboomのselect要素を参照している.以下はそのスクリーンショット
fesskill.js
var clone = function(obj) { var object = {}; for (var i in obj) { object[i] = obj[i]; } return object; }; var TRUE_STRING = "true"; var ICON_WIDTH = "32"; // キャラクタークラス列挙 var CHARACTER_CLASS = { WARRIOR: "warrior", SCOUT: "scout", SORCERER: "sorcerer", FENCER: "fencer", CESTUS: "cestus" }; // 表ファイル所在 TABLE_DIR = "table/"; // 表ファイル拡張子 TABLE_EXTENTION = ".tsv"; //function makeSkillBox(id, name, level1, level2, level3, ) /** * TSVファイルのパース結果を持つクラス * @param {undefined} characterClass キャラクタクラス * @returns {undefined} */ function Tsv(characterClass) { var filePath = this.filePath = TABLE_DIR + characterClass + TABLE_EXTENTION; var tableData; // ファイル内容をajax後も使うからasync: false try { $.ajax({ url: filePath, dataType: "text", async: false }).done(function(data) { tableData = $.parse(data).results; }).fail(function(data) { var message = "file not found: " + filePath; console.log(message); }); } catch (e) { console.log(e); console.log("filePath: " + filePath); } // 抽出データをプロパティで受ける this.data = tableData; } Tsv.prototype = { /** * table要素として出力する * @returns {undefined} */ show: function() { if (typeof (this.data) === "undefined") { $("div#showTable").append("<p>" + this.filePath + ": no data</p>"); return; } var tableData = this.data; var table = $("<table />").appendTo($("div#showTable")); // table caption table.append($("<caption />", {"text": this.filePath})); // table header var thead = $("<thead />"); thead.appendTo(table); var tr = $("<tr />"); tr.appendTo(thead); tableData.fields.forEach(function(col) { tr.append($("<th />", {"text": col})); }); // table body tableData.rows.forEach(function(row) { var tr = $("<tr />"); tr.appendTo(table); tableData.fields.forEach(function(col) { tr.append($("<td />", {"text": row[col]})); }); }); } }; /** * * @param {papaParse().results} tsvRow * @returns {Skill} */ function Skill(tsvRow) { this.id = tsvRow["id"]; this.name = tsvRow["name"]; this.maxLevel = tsvRow["maxLevel"]; this.preSkill = tsvRow["name"]; this.level1 = tsvRow["level1"]; this.level2 = tsvRow["level2"]; this.level3 = tsvRow["level3"]; this.description = tsvRow["description"]; this.isInitial = tsvRow["isInitial"]; this.level = 0; } Skill.prototype = { getName: function() { return this.name; }, getHtml: function(characterClass) { var div = '<div id="' + this.id + '">'; var icon = '<img src="image/' + characterClass + '/' + this.id + '.gif" alt="' + this.name + 'のアイコン" class="skillicon" width="' + ICON_WIDTH + '" height="' + ICON_WIDTH + '">'; var levelbox = ""; if ((this.isInitial === TRUE_STRING) && (this.maxLevel === 1)) { // 初期取得スキルかつ最大レベル1の場合.基本攻撃 levelbox = " Lv. 1"; } else { levelbox = 'Lv. <select id="levelbox" id="">\n'; if (this.isInitial !== TRUE_STRING) { // 初期取得スキルでない場合 levelbox += '<option value="0">0</option>'; } for (i = 1; i <= this.maxLevel; i++) { levelbox += '<option value="' + i + '">' + i + '</option>'; } levelbox += '</select>'; } // 消費スキルポイント var pointbox = ""; if ((this.isInitial === TRUE_STRING) && (this.maxLevel === 1)) { // 初期取得スキルかつ最大レベル1の場合.基本攻撃 // 何もしない } else { // 現在レベルに合わせて "_" か "X"を印字する var mark = "X"; if (this.level < 1) { // マーク切り替え mark = "_"; } for (var i = 0; i < this.level1; i++) { pointbox += mark; } if (this.level < 2) { // マーク切り替え mark = "_"; } // レベル間隔 pointbox += " "; for (var i = 0; i < this.level2; i++) { pointbox += mark; } // レベル間隔 pointbox += " "; if (this.level < 3) { // マーク切り替え mark = "_"; } for (var i = 0; i < this.level3; i++) { pointbox += mark; } } return div + icon + this.name + levelbox + pointbox + "</div>"; } }; $(function() { $("input.upLevel").click(function() { // 直前のselect要素を掴む console.log($("input.upLevel").prev().prev().val()); $("div#showTable").prepend("aaaaaaa"); }); });
index.html(抜粋)
<tr class="common"> <td id="sonicboom"> <img class="skillicon" src="image/warrior/sonicboom.gif" width="32" height="32" alt="ソニックブームアイコン" /> ソニックブーム <span class="levelbox">Lv. <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="button" class="downLevel" value="↓" /> <input type="button" class="upLevel" value="↑" /></span> </td> <td id="forceimpact"> <img class="skillicon" src="image/warrior/forceimpact.gif" width="32" height="32" alt="フォースインパクトアイコン" />フォースインパクト <span class="levelbox">Lv. <select><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="button" class="downLevel" value="↓" /><input type="button" class="upLevel" value="↑" /></span> </td> <td id="crumblestorm"> <img class="skillicon" src="image/warrior/crumblestorm.gif" width="32" height="32" alt="クランブルストームアイコン" />クランブルストーム <span class="levelbox">Lv. <select><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="button" class="downLevel" value="↓" /><input type="button" class="upLevel" value="↑" /></span> </td> </tr>