iT邦幫忙

2

JavaScript 透過變數改變div style

#html #javascript #jquery #前端 #求救
shiuan1127 2022-05-09 13:29:36 ‧ 1135 瀏覽

  • 分享至 

  • xImage

想問各位大大
當我按下Next按鍵後
#P0隱藏，#P1顯示(這樣
而當我按下Prev按鍵後
#P1隱藏，#P0顯示(這樣

以下是我的html、js程式碼
我不知道哪個地方出錯
目前是呈現按下按鍵後沒有動靜的狀態

想問是我的程式碼錯誤的地方在哪？
也想知道有沒有其他的寫法可以呈現這樣的效果
感謝各位(； ･д･´)(； ･д･´)(； ･`д･´)

html

<div id="P0">
<p>0</p>
<button class="next" data-idn="0">Next</button>
</div>

<div style="display:none;" id="P1">
<p>1</p>
<button class="prev" data-idp="1">Prev</button>
<button class="next" data-idn="1">Next</button>
</div>

<div style="display:none;" id="P2">
<p>2</p>
<button class="prev" data-idp="2">Prev</button>
<button class="next" data-idn="2">Next</button>
</div>

<div style="display:none;" id="P3">
<p>3</p>
<button class="prev" data-idp="3">Prev</button>
<button class="next" data-idn="3">Next</button>
</div>

<div style="display:none;" id="P4">
<p>4</p>
<button class="prev" data-idp="4">Prev</button>
</div>

js

$(function () {
	$('.next').on('click', function () {  
        var idn = $(this).attr('data-idn');
        var none_div1 = $('#P'+idn);
        var next_div = $('#P'+(idn+1));
        none_div1.style.display="none";
        next_div.style.display="";
    } );
    
    $('.prev').on('click', function () {  
        var idp = $(this).attr('data-idp');
        var none_div2 = $('#P'+idp);
        var prev_div = $('#P'+(idp-1));
        none_div2.style.display="none";
        prev_div.style.display="";
    } );
});
froce iT邦大師 1 級 ‧ 2022-05-09 14:04:14 檢舉
1. 你不覺得你的 Prev 和 Next 應該要跟你的內容分開嗎?
2. 或許你應該考慮一下同樣的html結構重用，只更改內容，不要每次都隱藏或新創容器。
shiuan1127 iT邦新手 4 級 ‧ 2022-05-09 14:42:40 檢舉
1.我有想過要分開，但不知道該怎麼寫就先寫在一起了

2.好的，這部分我再想想能怎麼做

感謝froce大大
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

4
淺水員
iT邦大師 6 級 ‧ 2022-05-09 14:52:52
最佳解答

chrome、firefox、edge 都可以按 F12 開啟開發者工具
到 console（主控台）分頁那邊可以看到錯誤訊息
可以利用這邊的資訊除錯

除錯1

錯誤訊息

Uncaught TypeError: none_div1.style is undefined

這表示 var idn = $(this).attr('data-idn'); 沒有拿到東西
回頭檢查 html 會看到第一個 Next Button 的 data-idn 誤寫成 data-idx 了

除錯2

修正上一個錯誤後再執行，會跑出

Uncaught TypeError: none_div1.style is undefined

試著列印 none_div1

var none_div1 = $('#P'+idn);
console.log(none_div1); //加上這行

會看到這是一個 Object 而不是 html 元素
這是初學常忽略的點
jquery object 跟 html element 是不同的（學習時務必注意現在操作的是何者）

要從 jquery object 取得的 html element
可以使用 .get(index)

none_div1.get(0).style.display="none";
next_div.get(0).style.display="";

除錯3

再次執行後出現錯誤

Uncaught TypeError: next_div.get(...) is undefined

試著列印

var next_div = $('#P'+(idn+1));
console.log('#P'+(idn+1), next_div);

會發現 '#P'+(idn+1) 是 #P01 而不是 #P1
這常發生在沒注意到 idn 是字串
所以 idn + 1 變成字串相加了
所以前面一開始取 idn 時應該要轉成整數

var idn = $(this).attr('data-idn');
idn = parseInt(idn, 10);
shiuan1127 iT邦新手 4 級 ‧ 2022-05-09 15:33:41 檢舉

感謝 淺水員大大

後來是了兩種方法(雖然是一樣意思哈哈哈哈)

第一種是上述直接修改style

$(function () {
    $('.next').on('click', function () {  
       var idn = $(this).attr('data-idn');
       idn = parseInt(idn, 10);
       var none_div1 = $('#P'+idn);
       var next_div = $('#P'+(idn+1));
       none_div1.get(0).style.display="none";
       next_div.get(0).style.display="";
    } );

    $('.prev').on('click', function () {  
       var idp = $(this).attr('data-idp');
       idp = parseInt(idp, 10);
       var none_div2 = $('#P'+idp);
       var prev_div = $('#P'+(idp-1));
       none_div2.get(0).style.display="none";
       prev_div.get(0).style.display="";
       
     } );
});

第二種是在CSS裡面加入

.none{
   display:none;
}

然後div程式碼變成

<div class="none" id="P1"> ...

js

$(function () {
    $('.next').on('click', function () {  
       var idn = $(this).attr('data-idn');
       idn = parseInt(idn, 10);
       var none_div1 = $('#P'+idn);
       var next_div = $('#P'+(idn+1));
       none_div1.addClass("none");
       next_div.removeClass("none");
    } );

    $('.prev').on('click', function () {  
       var idp = $(this).attr('data-idp');
       idp = parseInt(idp, 10);
       var none_div2 = $('#P'+idp);
       var prev_div = $('#P'+(idp-1));
       none_div2.addClass("none");
       prev_div.removeClass("none");
       ;
     } );
});
淺水員 iT邦大師 6 級 ‧ 2022-05-09 15:53:18 檢舉

補充一下之前回的
其實 jquery object 有 .css() 可以用

none_div1.css('display', 'none');
next_div.css('display', '');

再來應該可以開始考慮用其它結構的方式來寫了
各種方式都可以試試看
我原本只是想說先學會除錯

登入發表回應
1
劉耀升Vic
iT邦新手 5 級 ‧ 2022-05-09 16:59:12

我比較懶，修改成這樣隨意參考
.html

<section id="P0">
  <p>0</p>
  <button class="next" data-idn="0">Next</button>
</section>

<section style="display: none" id="P1">
  <p>1</p>
  <button class="prev" data-idp="1">Prev</button>
  <button class="next" data-idn="1">Next</button>
</section>

<section style="display: none" id="P2">
  <p>2</p>
  <button class="prev" data-idp="2">Prev</button>
  <button class="next" data-idn="2">Next</button>
</section>

<section style="display: none" id="P3">
  <p>3</p>
  <button class="prev" data-idp="3">Prev</button>
  <button class="next" data-idn="3">Next</button>
</section>

<section style="display: none" id="P4">
  <p>4</p>
  <button class="prev" data-idp="4">Prev</button>
</section>

.js

let currIndex = 0;
const $allSection = $('section');

$(".next").on("click", function () {
  $allSection.css('display', 'none');
  $($allSection[++currIndex]).css('display', 'block');
});

$(".prev").on("click", function () {
  $allSection.css('display', 'none');
  $($allSection[--currIndex]).css('display', 'block');
});
shiuan1127 iT邦新手 4 級 ‧ 2022-05-10 11:07:12 檢舉

想問問 vicisgood 大大

我想要把Prev跟Next按鈕提出
然後把P0的Prev隱藏
然後把P4的Next改成Review

目前程式碼如下
是可以運作的
但想問問有沒有更好的寫法
謝謝

.html

<section id="P0">
  <p>0</p>
</section>

<section style="display: none" id="P1">
  <p>1</p>
</section>

<section style="display: none" id="P2">
  <p>2</p>
</section>

<section style="display: none" id="P3">
  <p>3</p>
</section>

<section style="display: none" id="P4">
  <p>4</p>
</section>
    
<button class="prev" style="display:none;" id="prev">Prev</button>
<button class="next" id="next">Next</button>

.js

let currIndex=0;
const $allSection = $('section');
var next = document.getElementById("next");
var prev = document.getElementById("prev");

     $(".next").on("click", function () {
     $allSection.css('display', 'none');
     currIndex++;
     if(currIndex<5){
     prev.style.display="";
     $($allSection[(currIndex-1)]).css('display', 'none');
     $($allSection[currIndex]).css('display', 'block');
     next.innerHTML="Next";
         if(currIndex<5 && currIndex==4){
         next.innerHTML="Review";
         prev.style.display="";
         $($allSection[(currIndex-1)]).css('display', 'none');
          $($allSection[currIndex]).css('display', 'block');
         }
     }
     else{
     next.innerHTML="Next";
     prev.style.display="none";
     $($allSection[4]).css('display', 'none');
     $($allSection[0]).css('display', 'block');
     currIndex=0;
     }
  });
                
       $(".prev").on("click", function () {
       $allSection.css('display', 'none');
       currIndex--;      
       if(currIndex>=0){
       next.innerHTML="Next";
       $($allSection[(currIndex-1)]).css('display', 'none');
       $($allSection[currIndex]).css('display', 'block');
          if(currIndex<5 && currIndex==0){
          next.innerHTML="Next";
          prev.style.display="none";
          $($allSection[(currIndex-1)]).css('display', 'none');
          $($allSection[currIndex]).css('display', 'block');
          }
       }
   });
劉耀升Vic iT邦新手 5 級 ‧ 2022-05-13 10:11:00 檢舉

.html新增一個Review按鈕
.js

let currIndex = 0;
const $allSection = $("section");
const lastIndex = $allSection.length - 1;

$("#next").on("click", function () {
  if (currIndex >= lastIndex) {
    return;
  }
  ++currIndex;
  refresh();
});

$("#prev").on("click", function () {
  if (currIndex <= 0) {
    return;
  }
  --currIndex;
  refresh();
});

$("#review").on("click", function () {
  currIndex = 0;
  refresh();
});

function refresh() {
  refreshContent();
  refreshBtn();
}

function refreshContent() {
  $allSection.hide();
  $($allSection[currIndex]).show();
}

function refreshBtn() {
  if (currIndex === 0) {
    $("#prev").hide();
  } else {
    $("#prev").show();
  }

  if (currIndex === lastIndex) {
    $("#next").hide();
    $("#review").show();
  } else {
    $("#next").show();
    $("#review").hide();
  }
}
登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙