Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Передача дополнительной информации в функцию по событию click (https://javascript.ru/forum/jquery/24818-peredacha-dopolnitelnojj-informacii-v-funkciyu-po-sobytiyu-click.html)

IONEX 15.01.2012 00:22

Передача дополнительной информации в функцию по событию click
 
Необходимо передать дополнительные параметры в функцию click. Пересмотрел кучу примеров, везде передается пустая (только eventObj) переменная. Как бы дописать туда доп. значения?

Сделал свою реализацию, но не работает:

<script language="javascript">
        $(document).ready( function () {
            var li_tabs=$('#horisontal-tabs li');//Запоминаю все элементы меню в переменную li_tabs
            
	        $('#horisontal-tabs li').click({tabs:'$li_tabs'},activeElement);//Пытаюсь дозаписать список переменной li_tabs
            
            function activeElement(obj) {
	           $(obj.tabs).filter("*[class='active']").each(function (){
	               $(this).toggleClass('active unactive');
	           });
	           $(obj.target).toggleClass('active unactive');
            }
        });
    </script>

melky 15.01.2012 00:35

Прочитайте хелп по jquery. тогда вопросы сами отпадут
$('body').click({ foo :"bar"}, function(e){
    alert(e.data.foo);
});

IONEX 15.01.2012 01:26

Спасибо за ссылку, все понятно, нужно использовать bind для этого, а для обращения к доп. переменной через запись eventOBJ.data. с этим разобрались...

Но хотелось бы отказать от конструкции приведенной в примере:


$('#foo').bind('click', {msg:'Spoon!'}, function(eventObject){
  alert(eventObject.data.msg);
});


а заменить на (так наглядней):

$('#foo').bind('click', {msg:'Spoon!'}, eventfunc);

function eventfunc(eventObject) {
  alert(eventObject.data.msg);
};


Реализация моего кода:

Согласно конструкции приведенной в Хелпе:

<script language="javascript">
        $(document).ready( function () {
            var li_tabs=$('#horisontal-tabs li'); 
            
	        $('#horisontal-tabs li').bind('click', {tabs:'$li_tabs'}, activeElement(obj){
	           $(obj.data.tabs).filter("*[class='active']").each(function (){
	               $(this).toggleClass('active unactive');
	           });
	           $(obj.target).toggleClass('active unactive');
            });
        });
    </script>


С вызовом отдельной процедурой:

<script language="javascript">
        $(document).ready( function () {
            var li_tabs=$('#horisontal-tabs li'); 
            
	        $('#horisontal-tabs li').bind('click', {tabs:'$li_tabs'}, activeElement(obj));
            
            
            function activeElement(obj) {
	           $(obj.data.tabs).filter("*[class='active']").each(function (){
	               $(this).toggleClass('active unactive');
	           });
	           $(obj.target).toggleClass('active unactive');
            };
            

        });
    </script>


Ни в каком виде не заработало, при обработке просто click (без bind), без передачи доп. данных все работает.

melky 15.01.2012 17:11

Цитата:

Сообщение от IONEX (Сообщение 150687)
Спасибо за ссылку, все понятно, нужно использовать bind для этого, а для обращения к доп. переменной через запись eventOBJ.data. с этим разобрались...

не обязательно bind. я же код кинул.
Цитата:

Сообщение от melky (Сообщение 150677)
$('body').click({ foo :"bar"}, function(e){
    alert(e.data.foo);
});

Цитата:

Сообщение от IONEX (Сообщение 150687)
Реализация моего кода:
<script language="javascript">
        $(document).ready( function () {
            var li_tabs=$('#horisontal-tabs li'); 
            
	        $('#horisontal-tabs li').bind('click', {tabs:'$li_tabs'}, activeElement(obj));
            
            
            function activeElement(obj) {
	           $(obj.data.tabs).filter("*[class='active']").each(function (){
	               $(this).toggleClass('active unactive');
	           });
	           $(obj.target).toggleClass('active unactive');
            };
            

        });
    </script>

скажите, а вы что передаёте и что хотите получить в результате?

ваша ошибка кроется тут :

$('#horisontal-tabs li').bind('click', *!*{tabs:'$li_tabs'}*!*, activeElement(obj));

значение неверное. вы передаёте строку. скажите, вы знакомы с типами в JS ?

ещё одна ваша ошибка находится здесь :

$('#horisontal-tabs li').bind('click', {tabs:'$li_tabs'}, *!*activeElement(obj)*/!*);


вы знаете, что делают скобки () в javascript ? стоя после идентификатора, они вызывают функцию, передавая ей аргументы. тут вы запускаете функцию на выполнение, передавая ей несуществующую переменную obj.

.....

вам необходимо передать объект. следать это можно так :
$(document).ready( function () {
            var li_tabs=$('#horisontal-tabs li'); 
            
	        $('#horisontal-tabs li').bind('click', { tabs: li_tabs }, activeElement);
            
            
            function activeElement(obj) {
	           $(obj.data.tabs).filter("*[class='active']").each(function (){
	               $(this).toggleClass('active unactive');
	           });
	           $(obj.target).toggleClass('active unactive');
            };
            

        });


можно было и не заморачиваться с передачей данных. я бы сделал по-другому, учитывая возможности jQuery и используя их по-максимуму :

$(document).ready(function() {
    var li_tabs = $('#horisontal-tabs li').click(activeElement);
    
    function activeElement(obj) {
        li_tabs.
            filter(".active").
                add(obj.target).
                    toggleClass('active unactive');
    };
    
});

IONEX 15.01.2012 17:24

Спасибо за помощь, ошибки действительно плевые! Передавать доп. данные хотел поскольку думал что li_tabs будут не видны в процедуре activeElement.

Последний вариант снимает все проблемы!

melky 15.01.2012 17:26

Цитата:

Сообщение от IONEX (Сообщение 150807)
Спасибо за помощь, ошибки действительно плевые! Передавать доп. данные хотел поскольку думал что li_tabs будут не видны в процедуре activeElement.

ошибаетесь, будут. у вас пробелы в знаниях JS. было бы неплохо пролистать http://learn.javascript.ru


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