這是我最近做的一個功能,按下上面的按鈕會自動帶值到下面的編輯區裡,例如我按下0
編輯區裡就會帶入0這個數字,我目前寫出第一版,可是我覺得應該還有更好的做法
只是我暫時還沒想到,能否給我參考一下各位的寫法?
編輯區的ID是editarea
html
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">標點符號提示欄</h3> <div class="result-number"> </div>
</div><!-- /.box-header -->
<div class="box-body">
<button type="button" class="btn btn-primary" id="0">0</button>
<button type="button" class="btn btn-primary" id="1">1</button>
<button type="button" class="btn btn-primary" id="2">2</button>
<button type="button" class="btn btn-primary" id="3">3</button>
<button type="button" class="btn btn-primary" id="4">4</button>
<button type="button" class="btn btn-primary" id="5">5</button>
<button type="button" class="btn btn-primary" id="6">6</button>
<button type="button" class="btn btn-primary" id="7">7</button>
<button type="button" class="btn btn-primary" id="8">8</button>
<button type="button" class="btn btn-primary" id="9">9</button>
</div>
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
$(function () {
$("button").click(function () {
var cont = "0";
$('#editarea').insertAtCaret(cont);
});
$("#1").click(function () {
var cont = "1";
$('#editarea').insertAtCaret(cont);
});
$("#2").click(function () {
var cont = "2";
$('#editarea').insertAtCaret(cont);
});
$("#3").click(function () {
var cont = "3";
$('#editarea').insertAtCaret(cont);
});
$("#4").click(function () {
var cont = "4";
$('#editarea').insertAtCaret(cont);
});
$("#5").click(function () {
var cont = "5";
$('#editarea').insertAtCaret(cont);
});
$("#6").click(function () {
var cont = "6";
$('#editarea').insertAtCaret(cont);
});
$("#7").click(function () {
var cont = "7";
$('#editarea').insertAtCaret(cont);
});
$("#8").click(function () {
var cont = "8";
$('#editarea').insertAtCaret(cont);
});
$("#9").click(function () {
var cont = "9";
$('#editarea').insertAtCaret(cont);
});
})
先把按鈕加個class,範例裡是textBtn
$('.textBtn').click(function(){
var cont = $(this).text()
$('#editarea').insertAtCaret(cont);
})
這樣你就不用傻傻的每個.textBtn都加id,然後一個一個重複...
$('.btn-primary').click(function(){
var cont = $(this).text();
$('#editarea').insertAtCaret(cont);
})
取得所有class為btn-primary的物件
然後看哪個被按 取得他的text