I have a function that is working and looks like this:
var $$ = function(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
// My function
var myFunction = function() {
$$( '.my-selector' ).forEach( function( element ) {
element.addEventListener('click', function(e){
console.log('Do something');
});
});
}
I would prefer it looks more like jQuery:
// My function
var myFunction = function() {
$('.my-selector').click(function(e) {
console.log('Do something');
});
}
I can't figure out how to do that. Any ideas?
(I want my code to be independent of frameworks so I don't want jQuery)
Solution1: with your own wrapper : Fiddler link
var $$ = function(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
var wrapper = function(elem){
var element = elem;
this.click = function(cb){
element.forEach(function(el){
el.addEventListener('click', function(e){
cb.apply(element,[e]);
});
});
};
};
return new wrapper(Array.prototype.slice.call(elements));
}
$$("#test").click(function(e){
console.log("Do something:"+e.type);
});
Solution 2 directly binding to native element: Fiddler link
var $$ = function(selector, context) {
context = context || document;
var elements = Array.prototype.slice.call(context.querySelectorAll(selector));
elements.click = function(cb){
elements.forEach(function(el){
el.addEventListener('click', function(e){
cb.apply(elements,[e]);
});
});
};
return elements;
}
$$("#test").click(function(e){
console.log("Do something:"+e.type);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.