我是JS(0.1级)的初学者,我的脚本有问题。
我的练习页面只有一页,但有2个菜单,单击菜单时,我需要将.active
类传递给另一个兄弟按钮(1A至1B,等等)。而且我不知道该怎么做。
我的脚本可以很好地运行,一次只有一个菜单,但是不能将.active
类应用于第二个菜单。
ShutdownAsync documentation (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 → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>
答案 0 :(得分:2)
$(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');
});
});
答案 1 :(得分:2)
如果仅通过按钮在菜单中的位置来关联按钮,则可以得到该位置,然后在每个菜单中的同一位置(通过:nth-child
selector)选择所有元素。为了简化操作,我们向每个菜单添加了一个类。
$(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 → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>
答案 2 :(得分:1)
您当前仅将.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>
答案 3 :(得分:1)
一种解决方案是使用jQuery数据属性。我们在与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>
答案 4 :(得分:1)
您可以使用一些文本操作来解析ID和按钮文本值,以识别从哪个菜单中单击了哪个按钮,然后计算如何在 other 中找到相同的按钮菜单。
此演示的注释假定您从第一个菜单中选择Buton 3
。该代码将:
从单击的按钮上遍历DOM树以找到最接近的包装器(请注意,我为这两个按钮包装器都添加了一个类,以使其变得容易),并获取其ID。 / p>
在连字符上拆分ID,然后获取右侧值(1或2)
使用三元运算符获取其他数字(例如,如果这是菜单1,则nxt_mnu
是2,依此类推)
获取此按钮的文本
与上面的(2)相同,使用split()
获取-A
或-B
从所有菜单上的所有按钮中删除.active
类
将.active
类添加到单击的按钮
(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 → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>
答案 5 :(得分:1)
这里,我将data属性与css属性选择器一起使用,以获取组中的相同元素。为了获得具有悬停效果的相同行为,我使用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 → 1B ... 2A → 2B ... 3A → 3B )<br>and backwards, of course,
are active at the same time...?</span>
</div>