Javascriptでページ内のclassを取得する

スマートフォンっぽいUIを、JQueryを使わずに作ってみる3で、aタグでボタンを作ってみました。今回は、フィードバックとして、ボタンが押されたときに色が変わるように修正をかけたいと思います。

cssのhover、actionだとうまく動いてくれなかったため、Javascriptを用いて、touchstart、touchendのときにそれぞれ色を変えるやり方で実装してみました。

以下、ボタンの形にするクラスをJavascriptで取得して、そいつらにtouchstart、touchendのイベントを登録するスクリプトです。

var buttonElement;

window.onload = function(){
	
	//ボタンのクラスを配列で取得
	buttonElement = document.getElementsByClassName('buttonLink');

	for (i = 0; i < buttonElement.length; i++) {
		buttonElement[i].addEventListener ('touchstart',  (function(j) {
    		return function(e) {
      			changePressedButtonBackgroundColor(e, j);
    		}
  		})(i), false);
  		
  		buttonElement[i].addEventListener ('touchend',  (function(j) {
    		return function(e) {
      			undoButtonBackgroundColor(e, j);
    		}
  		})(i), false);
	}
}

var currentClassName;

function undoButtonBackgroundColor(event, str) {
	buttonElement[str].className = currentClassName;
}

function changePressedButtonBackgroundColor(event, str) {
	currentClassName = buttonElement[str].className;
	buttonElement[str].className = buttonElement[str].className.replace(/orange/g, 'pressButton');
}

ontouchstartで、オレンジの色を指定するcssが入っている場合は、pressButtonというcssに切り替わる

ontouchendでもとのcssの組み合わせに戻す

という処理に今のところなっています。

addEventListenerに独自の引数を追加するところに何気にはまりましたが、

addEventListener で登録する関数に引数を渡す

を参考にさせたいただきました。

正規表現はこれやこれを。

明日からもう少し調整をかけてみます。