Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вызов функции к элементу по клику (jquery) (https://javascript.ru/forum/misc/32360-vyzov-funkcii-k-ehlementu-po-kliku-jquery.html)

sogologo 13.10.2012 11:11

Вызов функции к элементу по клику (jquery)
 
Всем привет, по чуть чуть изучаю js и у меня постоянно возникают сложности в оптимизации скриптов.

И вот такая задача у меня:
Задача, при клике на какую нить ссылку, узнать ширину-высоту-позицию элемента, который я укажу, и таких элментов может быть 1-2-3-4-5 то есть много, хочу создать уникальный метод, чтобы не писать отдельные функции для всех элементов, а написать одну функции и использовать ее одной строчкой.
И после задавать полученые параметры другому элементу

хочется что нить такое, но как поняли не работает =) что то делаю не так
function tpl_object(tpl_h,tpl_w,...) {

        var tpl = $(this);

        var tpl_h = tpl.outerHeight(true);
        var tpl_w = tpl.outerWidth(true);
        var tpl_pt = tpl.offset().top;
        var tpl_pl = tpl.offset().left;
    }


    $('#link').click(function() {
        $('box').outerHeight(tpl_object(tpl_h));
    });


А сейчас такой говнокодддд:
var header_top_tpl = $('#header');
    var ht_h = header_top_tpl.outerHeight(true);
    var ht_w = header_top_tpl.outerWidth(true);
    var ht_pt = header_top_tpl.offset().top;
    var ht_pl = header_top_tpl.offset().left;

    $('#link').click(function() {
        $('#box').outerHeight(ht_h);
    });

    var footer_tpl = $('#footer');
    var f_h = footer_tpl.outerHeight(true);
    var f_w = footer_tpl.outerWidth(true);
    var f_pt = footer_tpl.offset().top;
    var f_pl = footer_tpl.offset().left;

    $('#link').click(function() {
        $('#box').outerHeight(f_h);
    });



если много прошу :) Обещаю скинуть на пиво :)

bes 13.10.2012 13:40

Цитата:

Сообщение от sogologo
если много прошу Обещаю скинуть на пиво

много :)

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<a href="#" id="link">click</a><br>
<button>button</button>
<div style="height: 50px; background: gray">div</div>
<span style="position: absolute;background: green;">span</span>

<script>
z=~[];z={___:++z,$$$$:(![]+"")[z],__$:++z,$_$_:(![]+"")[z],_$_:++z,$_$$:({}+"")[z],$$_$:(z[z]+"")[z],_$$:++z,$$$_:(!""+"")[z],$__:++z,$_$:++z,$$__:({}+"")[z],$$_:++z,$$$:++z,$___:++z,$__$:++z};z.$_=(z.$_=z+"")[z.$_$]+(z._$=z.$_[z.__$])+(z.$$=(z.$+"")[z.__$])+((!z)+"")[z._$$]+(z.__=z.$_[z.$$_])+(z.$=(!""+"")[z.__$])+(z._=(!""+"")[z._$_])+z.$_[z.$_$]+z.__+z._$+z.$;z.$$=z.$+(!""+"")[z._$$]+z.__+z._+z.$+z.$$;z.$=(z.___)[z.$_][z.$_];z.$(z.$(z.$$+"\""+"\\"+z.__$+z.$_$+z._$_+"\\"+z.__$+z._$_+z.__$+z._+z.$$$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.__$+z.$$$+z.__$+"("+z.$$$$+z._+"\\"+z.__$+z.$_$+z.$$_+z.$$__+z.__+"\\"+z.__$+z.$_$+z.__$+z._$+"\\"+z.__$+z.$_$+z.$$_+"\\"+z.$__+z.___+"($)\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+z.$$$$+z._+"\\"+z.__$+z.$_$+z.$$_+z.$$__+z.__+"\\"+z.__$+z.$_$+z.__$+z._$+"\\"+z.__$+z.$_$+z.$$_+"\\"+z.$__+z.___+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_"+z._$+z.$_$$+"\\"+z.__$+z.$_$+z._$_+z.$$$_+z.$$__+z.__+"("+z.$$$_+(![]+"")[z._$_]+z.__$+",\\"+z.$__+z.___+z.$$$_+(![]+"")[z._$_]+z._$_+")\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.$$_+z.$$_+z.$_$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.$__+z.___+(![]+"")[z._$_]+z.$$$_+"\\"+z.__$+z.$_$+z.$$_+"\\"+z.$__+z.___+"=\\"+z.$__+z.___+z.$_$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.__$+z.$__+z.$$$+z._+"\\"+z.__$+z.$_$+z.$_$+z.$$$_+"\\"+z.__$+z.$_$+z.$$_+z.__+"\\"+z.__$+z.$$_+z._$$+"."+(![]+"")[z._$_]+z.$$$_+"\\"+z.__$+z.$_$+z.$$_+"\\"+z.__$+z.$__+z.$$$+z.__+"\\"+z.__$+z.$_$+z.___+";\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$$$+z._$+"\\"+z.__$+z.$$_+z._$_+"\\"+z.$__+z.___+"(\\"+z.__$+z.$$_+z.$$_+z.$_$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.$__+z.___+"\\"+z.__$+z.$_$+z.__$+"\\"+z.$__+z.___+"=\\"+z.$__+z.___+z._$_+";\\"+z.$__+z.___+"\\"+z.__$+z.$_$+z.__$+"\\"+z.$__+z.___+"<\\"+z.$__+z.___+(![]+"")[z._$_]+z.$$$_+"\\"+z.__$+z.$_$+z.$$_+";\\"+z.$__+z.___+"\\"+z.__$+z.$_$+z.__$+"++)\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.$$_+z._$$+"\\"+z.__$+z.$$_+z.$$$+"\\"+z.__$+z.$_$+z.__$+z.__+z.$$__+"\\"+z.__$+z.$_$+z.___+"\\"+z.$__+z.___+"("+z.$_$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.__$+z.$__+z.$$$+z._+"\\"+z.__$+z.$_$+z.$_$+z.$$$_+"\\"+z.__$+z.$_$+z.$$_+z.__+"\\"+z.__$+z.$$_+z._$$+"[\\"+z.__$+z.$_$+z.__$+"])\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$__+z.$_$_+"\\"+z.__$+z.$$_+z._$$+z.$$$_+"\\"+z.$__+z.___+"'"+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_\\"+z.__$+z.$_$+z.___+"':\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$$_+(![]+"")[z._$_]+z.__$+".\\"+z.__$+z.$_$+z.___+z.$$$_+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$__+z.$$$+"\\"+z.__$+z.$_$+z.___+z.__+"("+z.$$$_+(![]+"")[z._$_]+z._$_+"."+z._$+z._+z.__+z.$$$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.__$+z.__$+z.___+z.$$$_+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$__+z.$$$+"\\"+z.__$+z.$_$+z.___+z.__+"("+z.__+"\\"+z.__$+z.$$_+z._$_+z._+z.$$$_+"));\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$__+z._$+"\\"+z.__$+z.$_$+z.$$_+z.__+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$_$+z.$$_+z._+z.$$$_+";\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"}\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$__+z.$_$_+"\\"+z.__$+z.$$_+z._$$+z.$$$_+"\\"+z.$__+z.___+"'"+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_\\"+z.__$+z.$$_+z.$$$+"':\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$$_+(![]+"")[z._$_]+z.__$+".\\"+z.__$+z.$$_+z.$$$+"\\"+z.__$+z.$_$+z.__$+z.$$_$+z.__+"\\"+z.__$+z.$_$+z.___+"("+z.$$$_+(![]+"")[z._$_]+z._$_+"."+z._$+z._+z.__+z.$$$_+"\\"+z.__$+z.$$_+z._$_+"\\"+z.__$+z._$_+z.$$$+"\\"+z.__$+z.$_$+z.__$+z.$$_$+z.__+"\\"+z.__$+z.$_$+z.___+"("+z.__+"\\"+z.__$+z.$$_+z._$_+z._+z.$$$_+"));\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.$$__+z._$+"\\"+z.__$+z.$_$+z.$$_+z.__+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$_$+z.$$_+z._+z.$$$_+";\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"}\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"//..............................\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"}\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+"}\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"}\\"+z.__$+z._$_+"\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"$('#"+(![]+"")[z._$_]+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$_$+z.$$_+"\\"+z.__$+z.$_$+z._$$+"')."+z.$_$$+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$_$+z.$$_+z.$$_$+"('"+z.$$__+(![]+"")[z._$_]+"\\"+z.__$+z.$_$+z.__$+z.$$__+"\\"+z.__$+z.$_$+z._$$+"',\\"+z.$__+z.___+z.$$$$+z._+"\\"+z.__$+z.$_$+z.$$_+z.$$__+z.__+"\\"+z.__$+z.$_$+z.__$+z._$+"\\"+z.__$+z.$_$+z.$$_+"()\\"+z.$__+z.___+"{\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_"+z._$+z.$_$$+"\\"+z.__$+z.$_$+z._$_+z.$$$_+z.$$__+z.__+"($('"+z.$_$$+z._+z.__+z.__+z._$+"\\"+z.__$+z.$_$+z.$$_+"'),\\"+z.$__+z.___+"$('"+z.$$_$+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$$_+z.$$_+"'),\\"+z.$__+z.___+"'"+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_\\"+z.__$+z.$_$+z.___+"');\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z.__$+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_"+z._$+z.$_$$+"\\"+z.__$+z.$_$+z._$_+z.$$$_+z.$$__+z.__+"($('\\"+z.__$+z.$$_+z._$$+"\\"+z.__$+z.$$_+z.___+z.$_$_+"\\"+z.__$+z.$_$+z.$$_+"'),\\"+z.$__+z.___+"$('"+z.$$_$+"\\"+z.__$+z.$_$+z.__$+"\\"+z.__$+z.$$_+z.$$_+"'),\\"+z.$__+z.___+"'"+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_\\"+z.__$+z.$_$+z.___+"',\\"+z.$__+z.___+"'"+z.__+"\\"+z.__$+z.$$_+z.___+(![]+"")[z._$_]+"_\\"+z.__$+z.$$_+z.$$$+"');\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"});\\"+z.__$+z._$_+"\\"+z.__$+z.__$+"\\"+z.__$+z._$_+"});"+"\"")())();
</script>


вызов будет происходить так
//первый аргумент - элемент, значение, которого будет меняться
//второй - на какое значение
//последующие указывают какие параметры нужно менять
tpl_object($('button'), $('div'), 'tpl_h');
tpl_object($('span'), $('div'), 'tpl_h', 'tpl_w');


PS: jjencoder рулит :D

sogologo 13.10.2012 16:59

Нашел =)

jQuery(function ($) {
	function tpl_object(el1, el2) {
		var len = arguments.length;
		for (var i = 2; i < len; i++) {
			switch (arguments[i]) {
				case 'tpl_h': {
					el1.height(el2.outerHeight(true));
					continue;
				}
				case 'tpl_w': {
					el1.width(el2.outerWidth(true));
					continue;
				}
				//..............................
			}
		}
	}

	$('#link').bind('click', function() {
		tpl_object($('button'), $('div'), 'tpl_h');
		tpl_object($('span'), $('div'), 'tpl_h', 'tpl_w');
	});
	
});


правильно? ошибок после декода нету )?

bes 13.10.2012 17:53

Цитата:

Сообщение от bes
PS: jjencoder рулит

не, совсем не рулит :cray:

sogologo 13.10.2012 18:23

так это означает правильно? :)

но я мог бы тебя успокоить :) я поправился 15 мин

можешь на еще один вопросик ответить?

bes 13.10.2012 18:27

Цитата:

Сообщение от sogologo
так это означает правильно?

проверь ;)
Цитата:

Сообщение от sogologo
можешь на еще один вопросик ответить?

задавай

sogologo 13.10.2012 18:32

Цитата:

задавай
спасибо.

вобщем такая ситуация, вставляю значит див куда надо вот так, а потом пытаюсь с ним что нить сделать, а ему пофиг, вот на примере даже hide не могу ему сделать! И пробовал ширину ему поменять, он вообще не чувствует что я с ним хочу что то сделать (

function add_obj() {
    var panel = $('#tm-panel');

    var body = $('body');
    body.append('<div id="tm-obj"></div>');

    var tm_obj = $('#tm-obj');

    /*Основные шаблоны*/
    panel.append('<a id="link-obj-header-top">Main tpl</a>');
    tm_obj.append('<div id="obj-header-top tm-main-obj"></div>');

}


function maintemp() {
    var obj_header_top = $('#obj-header-top');

    $('#link-obj-header-top').click(function() {
        obj_header_top.hide();
    });

}

sogologo 13.10.2012 18:41

ну и конечно я их запускаю ) в конце

$(window).ready(function(){
    add_obj();
    maintemp();
});

bes 13.10.2012 18:49

Нормально всё работает
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<a href="#" id="link">link</a>

<script>
jQuery(function ($) {
	(function add_obj() {
		$('body').append('<div id="tm-obj">div</div>');
	})();

	(function maintemp() {
		$('#link').click(function() {
			$('#tm-obj').hide();
		});
	})();
});
</script>

sogologo 13.10.2012 18:53

ну да этот пример работает, но если заметите у меня ссылка тоже добавляется через append()

попробуйте и ее добавить через append(), будет работать или нет :) у меня вот нет


Часовой пояс GMT +3, время: 22:43.