iT邦幫忙

0

JavaScript 透過變數的方式抓取值的問題

https://ithelp.ithome.com.tw/upload/images/20220114/20144862yYeoudI3eV.jpg
小的想要做一個點擊1,li1就跑到最上面的效果(如圖所示),目前的程式碼是能運作的,但就是非常徒法煉鋼哈哈哈哈哈
我想用變數的方法,讓系統去辨認是哪一個button被點擊,然後那個相應的li就要跑到最上面去這樣。

想請教各位大大能用什麼方式去縮短我目前的程式碼,以及我該用甚麼樣的方式去做出我說的用變數去判斷值的效果?

麻煩各位大大幫小的解惑了,謝謝(跪

HTML

    <button class="b1 btn" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">1</button>
    <button class="b2 btn" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">2</button>
    <button class="b3 btn" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3">3</button>
    <button class="b4 btn" data-bs-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample4">4</button>
    <button class="b5 btn" data-bs-toggle="collapse" href="#collapseExample5" role="button" aria-expanded="false" aria-controls="collapseExample5">5</button>

<div class="box">
    <div class="move1 collapse"  id="collapseExample1">我是一個普通的li標籤1</div>
    <div class="move2 collapse"  id="collapseExample2">我是一個普通的li標籤2</div>
    <div class="move3 collapse"  id="collapseExample3">我是一個普通的li標籤3</div>
    <div class="move4 collapse"  id="collapseExample4">我是一個普通的li標籤4</div>
    <div class="move5 collapse"  id="collapseExample5">我是一個普通的li標籤5</div>
</div>

Javascript

$(function () {
    $('.b1').click(function () {
        var cur_div = $('.move1');
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    });
            
            $('.b2').click(function () {
        var cur_div = $('.move2');
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    });
            
            $('.b3').click(function () {
        var cur_div = $('.move3');
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    });
            
            $('.b4').click(function () {
        var cur_div = $('.move4');
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    });
            
            $('.b5').click(function () {
        var cur_div = $('.move5');
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    });
});

1 個回答

0
horace_work
iT邦新手 3 級 ‧ 2022-01-14 15:52:19
最佳解答

html我沒有調整,點擊事件改為一次宣告全部,
直接用button的text(這個可以用data-xxx埋在html處理也可以)組合要處理的div id,
剩下做法都一樣,this是點擊事件的element

$(function () {
		$('.btn').on('click', function () {
    		var idx = $(this).text();   
        var cur_div = $('#collapseExample'+idx);
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    } );
});
看更多先前的回應...收起先前的回應...

明白了,感謝大大的解答以及解說,小的真的萬分感謝

想問問大大,如果我把上方按鈕的文字改成a.b.c.d的話;
那var idx的部分應該要怎麼修改呢?

沒事了,我發現只要這樣就可以了

html

<div class="buybtn" id="1"><button class="btn" data-bs-toggle="collapse" href="#wheel1" role="button" aria-expanded="false" aria-controls="wheel1">1</button></div>
<div class="buybtn" id="2"><button class="btn" data-bs-toggle="collapse" href="#wheel2" role="button" aria-expanded="false" aria-controls="wheel2">2</button></div>
<div class="buybtn" id="3"><button class="btn" data-bs-toggle="collapse" href="#wheel3" role="button" aria-expanded="false" aria-controls="wheel3">3</button></div>
<div class="buybtn" id="4"><button class="btn" data-bs-toggle="collapse" href="#wheel4" role="button" aria-expanded="false" aria-controls="wheel4">4</button></div>
<div class="buybtn" id="5"><button class="btn" data-bs-toggle="collapse" href="#wheel5" role="button" aria-expanded="false" aria-controls="wheel5">5</button></div>

Javascript

$(function () {
   $('.buybtn').on('click', function () {
       var idx = $(this).attr('id');   
       var cur_div = $('#wheel'+idx);
       var first_div = $('.box div').eq(0);
    first_div.before(cur_div);
      } );
   });

html上的id,有唯一性所以盡量不要用1 2 3命名,可以用我上面說的data-xxx屬性來處理,我使用了data-idx來記錄要處理的id,甚至要把div的id直接放上去也可以

html

<button class="b1 btn" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1" data-idx="1">1</button>
    <button class="b2 btn" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2" data-idx="2">2</button>
    <button class="b3 btn" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3" data-idx="3">3</button>
    <button class="b4 btn" data-bs-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample4" data-idx="4">4</button>
    <button class="b5 btn" data-bs-toggle="collapse" href="#collapseExample5" role="button" aria-expanded="false" aria-controls="collapseExample5" data-idx="5">5</button>

<div class="box">
    <div class="move1 collapse"  id="collapseExample1">我是一個普通的li標籤1</div>
    <div class="move2 collapse"  id="collapseExample2">我是一個普通的li標籤2</div>
    <div class="move3 collapse"  id="collapseExample3">我是一個普通的li標籤3</div>
    <div class="move4 collapse"  id="collapseExample4">我是一個普通的li標籤4</div>
    <div class="move5 collapse"  id="collapseExample5">我是一個普通的li標籤5</div>
</div>

js

$(function () {
		$('.btn').on('click', function () {
    		//var idx = $(this).text();   
        var idx = $(this).attr('data-idx');
        var cur_div = $('#collapseExample'+idx);
        var first_div = $('.box div').eq(0);
        first_div.before(cur_div);
    } );
});

我要發表回答

立即登入回答