我的CodePen: http://codepen.io/leongaban/pen/IGcBa
我有一个包含5个项目的数组:
var home = {
faqmenu : ['faq-general',
'faq-protecting',
'faq-search',
'faq-incoming',
'faq-requests']
};
我的标记中的简单列表菜单,我使用标记data-pane
来指示单击了哪个按钮。
然后在我的jQuery中faqpane = $(this).data('pane');
就是它如何找到点击的按钮。
<li id="faq-general" data-pane="faq-general" class="faq-menu-item faq-blue">
<span>General Questions</span>
</li>
<li id="faq-protecting" data-pane="faq-protecting" class="faq-menu-item">
<span>Protecting Your Data</span>
</li>
...
我正在尝试构建一个简单的Case Switch函数,该函数将找出单击的按钮,现在我需要对单击的按钮以及未单击的项执行某些操作。< / p>
很容易对点击的按钮执行操作,但如何定位未点击的所有其他项目并更改其CSS?
$('.faq-menu-item').click(faqMenuShow);
function faqMenuShow(event) {
faqpane = $(this).data('pane');
console.log('The clicked faqpane is: '+faqpane);
switch (faqpane) {
case 'faq-general':
// Do stuff on the faq-general button - easy
jQuery.each(home.faqmenu, function(index, value) {
console.log(this);
return (this != "faq-general");
});
// ^ For items that are NOT faq-general
// remove this class: .parent().removeClass('faq-blue');
break;
case 'faq-protecting':
break;
case 'faq-search':
break;
case 'faq-incoming':
break;
case 'faq-requests':
break;
}
};
我console.log(this);
函数中的jQuery each
在控制台中吐出这个:
你将如何找到未被选中的项目并运行一些基本功能,比如删除它们上的类/ css?
我的CodePen: http://codepen.io/leongaban/pen/IGcBa
答案 0 :(得分:1)
最简单的方法是检查id是否不相同。
切换前的代码:
var this_id = this.id;
$('.faq-menu-item').each(function() {
if (this.id != this_id) {
$(this).removeClass('faq-blue');
}
});
答案 1 :(得分:1)
<强> Working jsFiddle Demo 强>
无需定义单独的数组,循环遍历DOM元素:
$(function () {
$('.faq-menu-item').on('click', function (event) {
// remove class `faq-blue` from all menu items
$('.faq-menu-item').removeClass('faq-blue');
// add class `faq-blue` to current element
$(this).addClass('faq-blue');
});
});
答案 2 :(得分:1)
如果我正确理解您的问题,您正在尝试修改所有 NOT 点击项目的CSS。因此,如果单击“faq-general”,则需要修改其余列表项。如果是这种情况,那么我认为jQuery siblings
正是您所寻找的:
$('.faq-menu-item').on('click', function(){
$(this).css('background', 'transparent');
$(this).siblings().css('background', 'red');
});
答案 3 :(得分:1)
我建议对菜单系统采用更通用的方法。使用case语句会使函数难以维护(因为每次添加新菜单时,都必须修改此函数)。
我会做一些事情:
1)创建一个选择所有菜单项的变量。这样,您不会在每次点击时重新选择它们。
var allMenus = $(".faq-menu-item");
2)如果您为每个菜单项调用了一组函数,请将它们视为对象的属性,如下所示:
var menuActions = { general: myFuncGeneral, protecting: myFuncProtecting};
3)以更通用的方式处理点击:
function faqMenuShow(event, allMenus) {
//this is a string the connects to the menuActions e.g. 'general'
var clickedMenu = $(this).id().replace('faq-','');
//this removes all blue classes on everything first, then re-adds to the clicked one.
allMenus.removeClass('faq-blue').filter(this).addClass('faq-blue');
allMenus[clickedMenu](); //this executes the function in the allMenus object
};
答案 4 :(得分:0)
我不知道是否可以使用jQuery完成,但我是初学的Web开发人员。
我认为你可以做的是在点击的元素中添加一个“clicked”类,然后检查所有其他不属于该类的元素并对其进行处理。
答案 5 :(得分:0)
如何创建一个单独的函数并传递单击的按钮,遍历数组并进行简单的条件检查
If (passedElement != arrayElement) { do css stuff here } else { // this is the button clicked, make active element
答案 6 :(得分:0)
在点击事件处理函数中,选择所有菜单项:
$('.faq-menu-item')
然后排除被点击的那个:
.not(this);
所以,将它们加在一起,你得到:
var notClicked = $('.faq-menu-item').not(this);
然后你只需调用你需要的jQuery函数,例如:
notClicked.css('color', 'red');
答案 7 :(得分:0)
你做了一件非常简单的事情。
只需检查date-pane
是否是您对所单击按钮的具体操作所需的那个,然后与其兄弟姐妹一起处理未单击元素的常规操作。
$('.faq-menu-item').click(function (e) {
faqpane = $(this).data('pane');
switch (faqpane) {
case 'faq-general':
//do whatever you want
alert("FAQ general");
break;
case 'faq-protecting':
//do whatever you want
alert("FAQ Protecting");
break;
}
// etc...
var notClicked = $(this).siblings();
//action for the not clicked elements
notClicked.each(function(){
$(this).css('background', '#ccc');
});
});