【急募】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>