Функция-селектор наподобие jQuery
Я не очень хорошо разбираюсь в JavaScript и не могу пока разобраться в сложном для меня коде jQuery. Интересует такой вопрос, как сделать функцию-селектор по аналогии с jQuery и Prototype. Пример, хочу своим способом сделать show/hide элемента.
<div id="errorBar" onclick="selectElement(this).hide()"> Создаю функцию:
function selectElement(element) {
this.hide = function () {
element.style.display = 'none';
}
}
Но консоль выдаёт ошибку: [23:09:05.005] TypeError: selectElement(this) is undefined Что я делаю не так и как сделать правильно? Пожалуйста, помогите. |
просто напиши:
<div onclick="this.style.display = 'none'">123</div> |
и то, что вы написали, так нельзя, вы сделали ф-ию конструтор:
function Parent() {
this.hide = function () {
alert('hide')
}
}
var child = new Parent()
child.hide()
try {
// но,
Parent.hide()
// не сработает
} catch (e) {
alert('не сработало')
}
|
<div id="errorBar" onclick="(new selectElement(this)).hide()">123</div>
<script>
function selectElement(element) {
this.hide = function () {
element.style.display = 'none';
}
}
</script>
|
Не совсем то. Мне нужна функция-обёртка, которую можно использовать с любым DOM-объектом, не создавая при этом каких-то лишних экземпляров.
|
<div id="errorBar" onclick="selectElement(this).hide()">123</div>
<script>
function selectElement( elem ) {
return new selectElement.prototype.init( elem );
}
selectElement.prototype = {
constructor: selectElement,
length: 0,
init: function( elem ) {
this[0] = elem;
this.length = 1;
return this;
},
hide: function() {
var elem, i = this.length;
for( ;elem = this[ --i ]; ) {
elem.style.display = 'none';
}
return this;
}
}
selectElement.prototype.init.prototype = selectElement.prototype;
</script>
|
Цитата:
|
Цитата:
Цитата:
|
<div id='div'>lol</div>
<script type='text/javascript'>
Object.prototype.hide = function (){
var prot = this + '';
if (/\w?\ HTML\w?/img.test(prot) == true) this.style.display = 'none';
else if (console) console.log("Ошибка");
};
setTimeout(function(){document.getElementById('div').hide();}, 3000)
</script>
|
Цитата:
|
devote,
хм, для кого мусор для кого нет, некоторые библиотеки не принебрегают расширением прототипов, ну а я так написал:write: |
devote,
кстати почему все всех пинают за расширение прототипов? |
Dim@,
Троллишь? Хотя, это самое простое и понятное решение, за исключением момента с (/\w?\ HTML\w?/img.test(prot) == true). devote, Не могли бы выставить комментарии? Не могу понять, каким образом работает код. |
shoo,
Цитата:
function selectElement(element) { //функция принимающая элемент
this.hide = function () {//у него создается функция hide
element.style.display = 'none';//которая изменяет style.display
}
}
|
<div id="errorBar" onclick="(new selectElement(this)).hide()">123</div> (new selectElement(this)) - создание нового selectElement принимающего данный элемент .hide() - скрытие |
Цитата:
|
Цитата:
Цитата:
работает она по простому принципу:
function isEmptyObject( obj ) {
for ( var name in obj ) {
return false;
}
return true;
}
alert( isEmptyObject({}) ); // true
Object.prototype.test = function() {};
alert( isEmptyObject({}) ); // false
Вот за это и не любят, то что это просто может сломать другой код. |
devote,
хм,;) Цитата:
|
Цитата:
|
shoo,
с учетом того что вы не понимаете как работают конструкторы, боюсь мои коменты вам вряд ли чем помогут, вам нужно почитать книжку для начала, понять что с чем едят. Там все подробно описано что и как, и даже примеры того что я сделал есть. |
А просто дать ссылку на мануал по обьектам и конструкторам слабо? Если человек не глупый - сам разберется.
http://javascript.ru/tutorial/object |
PeaceCoder,
я не читал эти книжки, уж простите, от того и ссылками затрудняюсь. Но по слухам знаю что книжки хорошие, Илья молодец, у него в крови разжевывать все до мелочей. Что не скажу о себе, с меня учитель хреновый. Я могу показать, объяснить, но вряд ли с первого раза кто поймет. |
devote,
Почему не понимаю как работают конструкторы? Просто ООП JS непривычно для меня. Неужели так трудно проставить несколько комментариев к коду. |
function selectElement(element) {
var selectModify = function() {
this.hide = function() {
element.style.display = 'none';
}
}
return new selectModify();
}
|
| Часовой пояс GMT +3, время: 13:48. |