jQuery массив арқылы айналдыру және таңдалған элементтерді табу

My CodePen: http://codepen.io/leongaban/pen/IGcBa

Менде 5 элемент бар Массив бар:

var home = {
    faqmenu : ['faq-general',
               'faq-protecting',
               'faq-search',
               'faq-incoming',
               'faq-requests']
           };


And my simple list menu in my markup, I'm using the tag data-pane to signal which button is clicked. Then in my jQuery faqpane = $(this).data('pane'); is how it finds out what button is clicked.

  • General Questions
  •  
    
    
  • Protecting Your Data
  •  
    ...
    

    enter image description here

    Мен қарапайым кілтті ауыстыру функциясын құруға тырысамын, ол қандай батырманың басылғанын біледі, енді сол батырманың басылған батырмасында, сондай-ақ басылмаған элементтерге қатысты кейбір әрекеттерді орындауым керек.

    It's easy to do stuff to the button that was clicked, but how do I target all the other items that were NOT clicked and change their 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;
            }
    
        };
    


    My console.log(this); in the jQuery each function spits this out in the console: enter image description here

    Қалай Таңдалған элементтер жоқ табу және оларға кластар/CSS алып тастау сияқты кейбір негізгі функцияларды іске қосу туралы баруға еді?

    My CodePen: http://codepen.io/leongaban/pen/IGcBa

    0
    Мен қандай батырманың басылғанын білу үшін тег деректерінің тақтасын қолданамын деп ойладым, идентификаторды қолданған болар едім, бірақ мен тегтерді пайдалануды ұнатады :)
    қосылды автор Leon Gaban, көзі
    Көптеген керемет жауаптардан гөрі, қазір бәрін тексеріп жатырмын ...
    қосылды автор Leon Gaban, көзі

    8 жауаптар

    Егер сіздің сұрағыңызды дұрыс түсінсеңіз, барлық NOT шертілген элементтердің CSS-ін өзгертуге тырысасыз. Сондықтан егер «faq-general» басылса, тізім элементтерінің қалғанын өзгерткіңіз келеді. Егер бұлай болса, онда jQuery siblings деп ойлаймын:

    ЖҰМЫС ІСТЕУІ

     $('.faq-menu-item').on('click', function(){
      $(this).css('background', 'transparent');
      $(this).siblings().css('background', 'red');
    });
    
    1
    қосылды
    О, керемет. Мен мұны білмедім. Мен келесі күні .each() деген мәселелермен болдым. Мүмкін бұл солай болды.
    қосылды автор ExceptionLimeCat, көзі
    .each() -қа шақыру қажет емес (және, дәлелдерсіз дұрыс емес), сондықтан оны алып тастай аласыз. JQuery-дегі сетордың функциялары сізді өзіңізге қайтарады.
    қосылды автор Anthony Grist, көзі

    Ең қарапайым тәсілі - бұл идентификатордың бірдей емес екенін тексеру.

    Ауыстыру алдында код:

    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

    1
    қосылды
    Салтанатқа рахмет! Әрі (function ()) басқа шешімдерді сынап жатыр, бірақ сіздің жұмысыңыз керемет): $ ('. Faq-menu-item'). Aiblings ().
    қосылды автор Leon Gaban, көзі
    Бұл әртүрлі түймелер басылған кезде нақты әрекеттерді орындағыңыз келсе, керемет жұмыс істейді.
    қосылды автор Leon Gaban, көзі

    Мәзір жүйелеріне жалпылама көзқараспен қарауды ұсынамын. Іс бойынша мәлімдеме жасай отырып, функцияны сақтау қиынға соғады (әрбір жаңа мәзірді қосқан сайын, сіз осы функцияны өзгертуіңіз керек).

    Мен бірнеше нәрсе жасадым:

    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
    };
    
    1
    қосылды
    О, ұқыпты, мұны көруге тура келеді
    қосылды автор Leon Gaban, көзі

    Жұмыс жасайтын jsFiddle демо

    Бөлек массивтің, 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');
        });
    });
    
    1
    қосылды
    Wow бұл супер қарапайым лол ... қасіретін сезінемін қайғылы сезінемін, қазір менің uber күрделі коммутатор корпусын алып тастау керек, жиі жеткілікті жиі пайдаланбаңыз, рахмет!
    қосылды автор Leon Gaban, көзі

    Сіз өте қарапайым нәрсе үшін күрделі нәрсе жасадыңыз.

    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');
        });
    });
    

    ӨМІР СЫЙЛЫҒЫ

    0
    қосылды

    Клик оқиғаларын өңдеу функциясының ішінде барлық мәзір элементтерін таңдаңыз:

    $('.faq-menu-item')
    

    одан кейін басылғанды ​​алып тастаңыз:

    .not(this);
    

    Осылайша, оларды бірге қосып, сіз:

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

    Содан кейін сізге қажет болатын jQuery функцияларын шақырасыз, мысалы:

    notClicked.css('color', 'red');
    
    0
    қосылды

    Бөлек функцияны жасау және басылған түймешікті массив бойынша итерациялау және жай қарапайым шартты тексеру

    Егер (passedElement! = arrayElement) {бұл жерде CSS бар болса} else {// бұл батырма басылған, белсенді элементін жасаңыз

    0
    қосылды

    JQuery арқылы жасалуы мүмкін екенін білмеймін, бірақ мен бастаушы веб-әзірлеушімін.

    Сіз жасай алатын деп ойлаймын, басылған элементке «басылған» сыныпты қосу, содан кейін сол сыныппен емес басқа барлық элементтерді тексеріп, оларға жұмыс істеу.

    0
    қосылды