iT邦幫忙

0

想請問我這個有沒有更好的寫法

  • 分享至 

  • xImage

https://ithelp.ithome.com.tw/upload/images/20190314/20110132Y1ZZ6DR5Ak.jpg

這是我最近做的一個功能,按下上面的按鈕會自動帶值到下面的編輯區裡,例如我按下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);
        });
  })      
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
froce
iT邦大師 1 級 ‧ 2019-03-14 16:15:55
最佳解答

先把按鈕加個class,範例裡是textBtn

$('.textBtn').click(function(){
    var cont = $(this).text()
    $('#editarea').insertAtCaret(cont);
})

這樣你就不用傻傻的每個.textBtn都加id,然後一個一個重複...

tenno081 iT邦研究生 4 級 ‧ 2019-03-14 16:42:35 檢舉

我懂了,感謝

tenno081 iT邦研究生 4 級 ‧ 2019-03-18 15:50:19 檢舉

不好意思,能否再請教一個問題,如果我想再追加一個

textboxarea,那我該如何下判斷游標位置?

目前我是這樣

  $('.textBtn').click(function () {
            var text = $(this).text()
            var text1 = $(this).text()
            $('#DescContest').insertAtCaret(text);
            $('#OrderContent').insertAtCaret(text1);
        })

這樣的話算是同步我按一個按鈕就兩個textboxarea
都一起顯示

0
Han
iT邦研究生 1 級 ‧ 2019-03-14 16:24:00
$('.btn-primary').click(function(){
    var cont = $(this).text();
    $('#editarea').insertAtCaret(cont);
})

取得所有class為btn-primary的物件
然後看哪個被按 取得他的text

froce iT邦大師 1 級 ‧ 2019-03-14 16:27:06 檢舉

btn-primary是bootstrap的class。
如果這個頁面沒其他按鈕還好,有的話...

Han iT邦研究生 1 級 ‧ 2019-03-14 16:46:27 檢舉

也是QQ 沒想太多~
謝大大!!

我要發表回答

立即登入回答