Javascript - 如何通過功能點擊，從一個菜單到另一個

Question

我是 JS 初學者（0.1 級），我的腳本有問題。

我的練習頁只有 1 頁，但有 2 個菜單，我需要在單擊菜單時，將.active類傳遞給另一個兄弟按鈕（1A 到 1B 等）。 我不知道該怎么做。

我的腳本一次只處理一個菜單，但不會將.active類應用到第二個菜單。

現場觀看演示(Codepen)

我究竟做錯了什么...？

提前致謝！

//----------------

 $(document).ready(function(){ $('#cont-menu .menu').click(function(){ $('.menu').removeClass("active"); $(this).addClass("active"); }); });

 body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red} .active{background:red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="cont-menu"> <div id="menu-1"> <div class="menu active">Buton 1-A</div> <div class="menu">Buton 2-A</div> <div class="menu">Buton 3-A</div> <div class="menu">Buton 4-A</div> <div class="menu">Buton 5-A</div> </div> <div id="menu-2"> <div class="menu active">Buton 1-B</div> <div class="menu">Buton 2-B</div> <div class="menu">Buton 3-B</div> <div class="menu">Buton 4-B</div> <div class="menu">Buton 5-B</div> </div> <br><br> <span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and vice versa, of course, are active at the same time...?</span> </div>

Answer 1

$(document).ready(function(){
  $('#cont-menu .menu').click(function(){
    $('.menu').removeClass('active');
    //Get the element from each list which matches the position of the clicked element
    $('#menu-1').children().eq($(this).index()).addClass('active');
    $('#menu-2').children().eq($(this).index()).addClass('active');
  });
});

演示

Answer 2

如果按鈕只是通過它們在菜單中的位置關聯，我們可以獲得該位置，然后選擇每個菜單中相同位置的所有元素（通過:nth-child選擇器）。 為了使事情更容易，我們為每個菜單添加了一個類。

 $(document).ready(function(){ $('#cont-menu .menu').click(function(){ var index = $(this).index() + 1; $('.menu').removeClass("active"); $('.menu-container :nth-child('+index+')').addClass("active"); }); });

 body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red} .active{background:red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="cont-menu"> <div class="menu-container"> <div class="menu active">Buton 1-A</div> <div class="menu">Buton 2-A</div> <div class="menu">Buton 3-A</div> <div class="menu">Buton 4-A</div> <div class="menu">Buton 5-A</div> </div> <div class="menu-container"> <div class="menu active">Buton 1-B</div> <div class="menu">Buton 2-B</div> <div class="menu">Buton 3-B</div> <div class="menu">Buton 4-B</div> <div class="menu">Buton 5-B</div> </div> <br><br> <span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and vice versa, of course, are active at the same time...?</span> </div>

Answer 3

您目前只將.active類添加到單擊的按鈕，如果我們為每個按鈕（名稱）添加一個標識符，我們就可以實現您的要求。

嘗試：

$(`[name=${$(this).attr('name')}]`).addClass("active");

 $(document).ready(function() { $('#cont-menu .menu').click(function() { $('.menu').removeClass("active"); $(`[name=${$(this).attr('name')}]`).addClass("active"); }); });

 body { text-align: center; font-family: Arial, sans-serif } .code { background: #d9d9d9; padding: 2px 5px } #cont-menu span { line-height: 1.75 } #cont-menu { position: relative; width: 500px; margin: 0 auto; top: 5px } #menu-1, #menu-2 { width: 150px; display: inline-block; vertical-align: top; margin: 0 20px } .menu { padding: 10px 20px 10px 10px; margin: 0 0 3px 0; color: #fff; text-align: left; background: #999; cursor: pointer } .menu:hover { background: red } .active { background: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="cont-menu"> <div id="menu-1"> <div class="menu active" name="button1">Buton 1-A</div> <div class="menu" name="button2">Buton 2-A</div> <div class="menu" name="button3">Buton 3-A</div> <div class="menu" name="button4">Buton 4-A</div> <div class="menu" name="button5">Buton 5-A</div> </div> <div id="menu-2"> <div class="menu active" name="button1">Buton 1-B</div> <div class="menu" name="button2">Buton 2-B</div> <div class="menu" name="button3">Buton 3-B</div> <div class="menu" name="button4">Buton 4-B</div> <div class="menu" name="button5">Buton 5-B</div> </div> <br><br> </div>

Answer 4

一種解決方案是使用 jQuery 數據屬性。 我們在每個菜單上為 this 設置一個值，將其與 1-5 關聯，然后可以使用它為兩個菜單按鈕添加類。

 $(document).ready(function(){ $('#cont-menu .menu').click(function(){ //get the value of the data-menu-class attribute var menuClass = $(this).data('menu-class'); //remove all previous active classes $('.menu').removeClass("active"); //add active to each menu (1&2) $('#menu-1 .menu'+menuClass).addClass('active'); $('#menu-2 .menu'+menuClass).addClass('active'); }); });

 body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red} .active{background:red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="cont-menu"> <div id="menu-1"> <div class="menu menu1 active" data-menu-class='1'>Buton 1-A</div> <div class="menu menu2" data-menu-class='2'>Buton 2-A</div> <div class="menu menu3" data-menu-class='3'>Buton 3-A</div> <div class="menu menu4" data-menu-class='4'>Buton 4-A</div> <div class="menu menu5" data-menu-classx='5'>Buton 5-A</div> </div> <div id="menu-2"> <div class="menu menu1 active" data-menu-class='1'>Buton 1-B</div> <div class="menu menu2" data-menu-class='2'>Buton 2-B</div> <div class="menu menu3" data-menu-class='3'>Buton 3-B</div> <div class="menu menu4" data-menu-class='4'>Buton 4-B</div> <div class="menu menu5" data-menu-class='5'>Buton 5-B</div> </div> </div>

Answer 5

您可以使用一些文本操作來解析 ID 和按鈕文本值，以識別點擊了哪個按鈕，來自哪個菜單，然后計算如何在另一個菜單中找到相同的按鈕。

該演示的評論假設您從第一個菜單中選擇了Buton 3 。 該代碼將：

1. 從單擊的按鈕向上遍歷 DOM 樹以找到最接近的包裝器（請注意，我向兩個按鈕包裝器添加了一個類以簡化操作） ，並獲取其 ID。

2. 在連字符上拆分 ID，然后獲取右側的值（1 或 2）

3. 使用三元運算符獲取另一個數字（即，如果這是菜單 1，則nxt_mnu是 2 等）

4. 獲取此按鈕的文本

5. 與上面的 (2) 相同，使用split()只獲取-A或-B之前的文本

6. 從所有菜單上的所有按鈕中刪除.active類

7. 將.active類添加到單擊的按鈕

8. (a) 選擇下一個菜單，(b) 找到包含與單擊的按鈕相同文本的文本的按鈕，(c) 將活動類添加到該姐妹按鈕

演示：

 $(document).ready(function(){ $('#cont-menu .menu').click(function(){ debugger; let mnu_num = $(this).closest('.menu-wrapper').attr('id'); mnu_num = mnu_num.split('-')[1]; //menu-1 let nxt_mnu = (mnu_num == 1) ? '2' : '1'; //2 let btn_txt = $(this).text(); //Buton 3-A btn_txt = btn_txt.split('-')[0] //eg. Buton 3 $('.menu').removeClass("active"); $(this).addClass("active"); $('#menu-' + nxt_mnu).find('.menu:contains(' +btn_txt+ ')').addClass('active'); }); });

 body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red} .active{background:red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="cont-menu"> <div id="menu-1" class="menu-wrapper"> <div class="menu active">Buton 1-A</div> <div class="menu">Buton 2-A</div> <div class="menu">Buton 3-A</div> <div class="menu">Buton 4-A</div> <div class="menu">Buton 5-A</div> </div> <div id="menu-2" class="menu-wrapper"> <div class="menu active">Buton 1-B</div> <div class="menu">Buton 2-B</div> <div class="menu">Buton 3-B</div> <div class="menu">Buton 4-B</div> <div class="menu">Buton 5-B</div> </div> <br><br> <span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and vice versa, of course, are active at the same time...?</span> </div>

Answer 6

在這里，我使用帶有 css 屬性選擇器的 data 屬性來獲取組中的相同元素。 為了獲得與懸停效果相同的行為，我使用 js 而不是 css 來控制它。

 $(document).ready(function() { $('#cont-menu').on('click', '.menu', function(e) { $('.menu').removeClass('active'); $(`[data-group=${this.dataset.group}]`).addClass("active"); }); $('#cont-menu').on('mouseenter', '.menu', function(e) { $('.menu').removeClass('hover'); $(`[data-group=${this.dataset.group}]`).addClass('hover') }); });

 body { text-align: center; font-family: Arial, sans-serif } .code { background: #d9d9d9; padding: 2px 5px } #cont-menu span { line-height: 1.75 } #cont-menu { position: relative; width: 500px; margin: 0 auto; top: 5px } #menu-1, #menu-2 { width: 150px; display: inline-block; vertical-align: top; margin: 0 20px } .menu { padding: 10px 20px 10px 10px; margin: 0 0 3px 0; color: #fff; text-align: left; background: #999; cursor: pointer } .menu.hover { background: red; } .active { background: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="cont-menu"> <div id="menu-1"> <div data-group="a" class="menu active">Buton 1-A</div> <div data-group="b" class="menu">Buton 2-A</div> <div data-group="c" class="menu">Buton 3-A</div> <div data-group="d" class="menu">Buton 4-A</div> <div data-group="e" class="menu">Buton 5-A</div> </div> <div id="menu-2"> <div data-group="a" class="menu active">Buton 1-B</div> <div data-group="b" class="menu">Buton 2-B</div> <div data-group="c" class="menu">Buton 3-B</div> <div data-group="d" class="menu">Buton 4-B</div> <div data-group="e" class="menu">Buton 5-B</div> </div> <br><br> <span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A &rarr; 1B ... 2A &rarr; 2B ... 3A &rarr; 3B )<br>and backwards, of course, are active at the same time...?</span> </div>