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]
> <javascript:>> 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] <javascript:>.
>> 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.
For more options, visit https://groups.google.com/d/optout.
