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]
> <javascript:>> 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] <javascript:>.
>> To view this discussion on the web visit https://groups.google.com/d/
>> msgid/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.
For more options, visit https://groups.google.com/d/optout.
