JavaScriptで配列を使った複数の文字置換に対応する方法
HTML
<form name="form1">
<select id="place">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>
<input class="btn" id="btn0" type="button" value="A"/>
<input class="btn" id="btn1" type="button" value="B"/>
<input class="btn" id="btn2" type="button" value="C"/>
<input class="btn" id="btn3" type="button" value="D"/>
<input class="btn" id="btn4" type="button" value="E"/>
<input class="btn" id="btn5" type="button" value="F"/>
<input class="btn" id="btn6" type="button" value="G"/>
<input class="btn" id="btn7" type="button" value="H"/>
</form>
<script>
$('.btn').on('click', function(){
var id1 = $(this).attr("id");
var id2 = id1.replace("btn","","g");
document.form1.place.selectedIndex = id2
// alert(id2);
set_status();
});
</script>
CSS
.btn{
display: inline-block;
padding: 0.2em 0.5em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;