ok, fair enough. I think I misunderstood what you said before, so my reply isn't what you were after :)
Max. On Tue Jan 06 2015 at 18:12:25 Niko Lang <[email protected]> wrote: > I think its cleaner to eliminate every active. I had the experience that > another solution may be buggy. My final solution is: > > <script> > Polymer({ > ready: function() { > this.$.searchText.classList.add('active'); > this.$.searchCategoriesText.classList.add('active'); > > }, > categoryClick: function(event, detail, sender) { > > var i; > > var x = this.$.searchCategories.querySelectorAll('li a'); > for (i = 0; i < x.length; i++) { > x[i].classList.remove("active"); > } > > sender.classList.add('active'); > > var x = this.$.searchContainer.querySelectorAll('input'); > for (i = 0; i < x.length; i++) { > x[i].classList.remove("active"); > > } > > this.$[sender.dataset.target].classList.add('active'); > } > }); > </script> > > > > > On Tuesday, January 6, 2015 2:55:04 AM UTC+1, David Waterman wrote: > >> Can you not add that to your query? Something like >> ...querySelectorAll('#searchContainer >> input:not(.active)'...? >> >> I'm still curious why you're not directly accessing searchContainer using >> Polymer's shortcut - eg by doing this.$.searchContainer. >> querySelectorAll('input:not(.active)').... >> >> Max. >> >> On Mon Jan 05 2015 at 22:16:36 Niko Lang <[email protected]> wrote: >> > Thank you so much. Almost there. But how to remove all the active classes >>> from the querySelectorAll-Array? >>> >>> <script> >>> Polymer({ >>> ready: function() { >>> >>> }, >>> categoryClick: function(event, detail, sender) { >>> console.log(sender.dataset.target); >>> >>> >>> console.log(this.$.searchField.querySelectorAll('#searchContainer >>> input')); >>> this.$.searchField.querySelectorAll('#searchContainer input' >>> ).classList.remove('active'); >>> this.$[sender.dataset.target].classList.add('active'); >>> } >>> }); >>> </script> >>> >>> >>> >>> >>> On Monday, January 5, 2015 3:05:59 PM UTC+1, David Waterman wrote: >>> >>>> I'm not sure why you wouldn't use the appropriate id for the >>>> data-target, then you can use >>>> this.$[sender.dataset.target].classList.add('active')....or >>>> something. >>>> >>>> However, somewhat tangentially, I have to wonder why you aren't using >>>> querySelectorAll() since there are several input elements in your >>>> #searchContainer, and why not use this.$.searchContainer directly. >>>> ...and this.this.$ doesn't look right at all (copy/paste error?) >>>> >>>> HTH >>>> >>>> Max. >>>> >>>> On Mon Jan 05 2015 at 21:30:38 Niko Lang <[email protected]> wrote: >>>> >>> I just worked through the tutorial and I am building my first own >>>>> element. And I am missing some DOM-Scripting Functions I know from >>>>> Prototype and jQuery that made my life very easy. But maybe my methods are >>>>> just not right. This is what I have done so far: >>>>> >>>>> <polymer-element name="search-field"> >>>>> <template> >>>>> >>>>> <div id="searchField"> >>>>> <ul id="searchCategories"> >>>>> <li><a id="search-categories-text" data-target="text" >>>>> on-click="{{categoryClick}}">Text</a></li> >>>>> <li><a id="search-categories-videos" data-target="videos" >>>>> on-click="{{categoryClick}}">Videos</a></li> >>>>> <li><a id="search-categories-audio" data-target="audio" >>>>> on-click="{{categoryClick}}">Audio</a></li> >>>>> </ul> >>>>> <div id="searchContainer"> >>>>> <input id="searchText" type="text" /> >>>>> <input id="searchVideos" type="text" /> >>>>> <input id="searchAudio" type="text" /> >>>>> </div> >>>>> </div> >>>>> >>>>> </template> >>>>> <script> >>>>> Polymer({ >>>>> ready: function() { >>>>> >>>>> }, >>>>> categoryClick: function(event, detail, sender) { >>>>> console.log(sender.dataset.target); >>>>> console.log(this.$.searchField.querySelector('# >>>>> searchContainer input')); >>>>> this.this.$.searchField.querySelector('#searchContainer >>>>> input'); >>>>> } >>>>> }); >>>>> </script> >>>>> </polymer-element> >>>>> >>>>> What I want to do is to set an active class to the bottom input-fields >>>>> when one of the above links are clicked. On jQuery I would just observe a >>>>> link and deactivate all input fields and activate the one input field I >>>>> want to have. But I am not sure how to do it without jQuery. I could just >>>>> use all the native javascript functions with loops etc but is there >>>>> anything polymer can offer to make things easier? >>>>> >>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>> --- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Polymer" group. >>>>> >>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>> >>>> >>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>> msgid/polymer-dev/f4fae7e7-ec08-46f8-88b3-78f8f08f0ca2%40googl >>>>> egroups.com >>>>> <https://groups.google.com/d/msgid/polymer-dev/f4fae7e7-ec08-46f8-88b3-78f8f08f0ca2%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> >> To view this discussion on the web visit https://groups.google.com/d/ >>> msgid/polymer-dev/6a7303cf-f46c-4ade-b370-0112f9978711% >>> 40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/6a7303cf-f46c-4ade-b370-0112f9978711%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> For more options, visit https://groups.google.com/d/optout. >>> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/8b9bf940-0fd6-4ed3-a902-ce3746b3c13b%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/8b9bf940-0fd6-4ed3-a902-ce3746b3c13b%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMZCrPjFi4g3h_ttMybReMJgvBTHyrjZA6eHR%3DYjcqPXUVAPiA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
