jQuery循环遍历数组并找到未选中的项目答案

【问题标题】：jQuery Looping through Array and finding the not selected itemsjQuery循环遍历数组并找到未选中的项目
【发布时间】：2013-06-20 15:31:09
【问题描述】：

我的 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 函数，该函数将找出单击了哪个按钮，现在有了这些信息，我需要对单击的按钮以及未单击的项目执行一些操作。

对被点击的按钮进行处理很容易，但是如何定位所有其他未被点击的项目并更改其 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;
        }

    };

我在jQuery each 函数中的console.log(this); 在控制台中将其吐出：

您将如何查找未选择的项目并运行一些基本功能，例如删除它们的类/css？

我的 CodePen： http://codepen.io/leongaban/pen/IGcBa

【问题讨论】：

我补充说我使用标签数据窗格来找出点击了哪些按钮，我想我可以使用 id，但我喜欢使用标签:)
哇，有这么多很棒的答案，现在都检查一下......

标签： jquery arrays loops switch-statement

【解决方案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】：

最简单的方法是检查 id 是否不相同。

切换前的代码：

var this_id = this.id;

$('.faq-menu-item').each(function() {
  if (this.id != this_id) {
    $(this).removeClass('faq-blue');
  }
});

http://codepen.io/anon/pen/iFagh

【讨论】：

很酷，谢谢！我必须对此进行更新才能使其正常工作： $('.faq-menu-item').siblings().each(function() { 仍在尝试其他解决方案，但您的解决方案效果很好:)
如果您还想在单击不同按钮时执行特定操作，这非常有用。

【解决方案3】：

如果我正确理解了您的问题，您正在尝试修改所有 NOT 点击项目的 CSS。因此，如果单击“faq-general”，您想修改其余的列表项。如果是这种情况，那么我认为 jQuery siblings 就是您要寻找的：

WORKING FIDDLE

 $('.faq-menu-item').on('click', function(){
  $(this).css('background', 'transparent');
  $(this).siblings().css('background', 'red');
});

【讨论】：

对.each() 的调用是不必要的（并且在没有参数的情况下可能不正确），因此您可以将其删除。 jQuery 中的 Setter 函数已经为您隐式迭代。
太酷了。我不知道。前几天我遇到了.each() 的问题。也许就是这样。

【解决方案4】：

我建议对菜单系统采用更通用的方法。有一个 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
};

【讨论】：

哦，真好，一定要试试这个

【解决方案5】：

我不知道这是否可以用 jQuery 完成，但我是一个初学者的 web 开发人员。

我认为你可以做的是为点击的元素添加一个“点击”类，然后检查所有其他不属于该类的元素并对其进行处理。

【讨论】：

【解决方案6】：

如何创建一个单独的函数并传递被单击的按钮，遍历数组并进行简单的条件检查

If (passedElement != arrayElement) { do css stuff here } else { // this is the button clicked, make active element

【讨论】：

【解决方案7】：

在您的点击事件处理函数中，选择所有菜单项：

$('.faq-menu-item')

然后排除被点击的那个：

.not(this);

所以，把它们加在一起，你会得到：

var notClicked = $('.faq-menu-item').not(this);

然后你只需调用你需要的 jQuery 函数，例如：

notClicked.css('color', 'red');

【讨论】：

【解决方案8】：

你为一件非常简单的事情做了如此复杂的事情。

只需检查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');
    });
});

LIVING EXAMPLE

【讨论】：