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/ms
>>> gid/polymer-dev/f4fae7e7-ec08-46f8-88b3-78f8f08f0ca2%40googlegroups.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/CAMZCrPjf-Lxs7jTSg7%3DJAesq1Q5PM5Aq4qiy25mhKac7uqSGgw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
