Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2012, 11:49
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Вызывать функцию для нескольких элементов
Добрый день!!
Не могу допереть,буду очень благодарен за совет,направление!
Это небольшой код для простоты:
две условных кнопки btn - каждая из них добавляет рядом с собой span-кнопку(cll), по которой в исходный btn добавляется текст "test"
<br><span class="btn">btn1</span>
<br><span class="btn">btn2</span>

пишем плагин
$.fn.btn = function(){
	var th = this; //ссылка на btn вызвавший ф-ю
		th.click(function() {
	console.log(this.tagName +' '+ this.id); //Id - пусто?

			$('<span class="cll">123</span>').insertAfter(this);
			
			$('.cll').live('click',function() {
				th.append('test'); //текст который вставляется в th
			});
});			
		
};


$('.btn').hover(function() {
 $(this).btn(); //вызов
});

так вот проблема в том что если вызвать метод $.fn.btn на обоих кнопках,то текст уже вставляется сразу в два btn, а должен только в один.
Задача стоит-при наведении мышкой (или клике) вызвать "панель инструментов"(cll) и по клику на элемент панели вставить в поле(btn).
подскажите как правильно навесить свой метод!
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2012, 12:31
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

krasovsky,

Вместо $('.cll') поставь th.next('.cll'). Ниже полный код:
$.fn.btn = function () {
    var th = this; //ссылка на btn вызвавший ф-ю
    th.click(function () {
        $('<span class="cll" style="color: red;">123</span>').insertAfter(this);

        th.next('.cll').click(function () { // элемент уже создан, можно и без live обойтись
            th.append('test'); //текст который вставляется в th
        });
    });
};

$('.btn').hover(function () {
    $(this).btn(); //!!! добавляет обработчик каждый раз
                    //т.е. если наведем 10 раз на кнопку, а потом клинем - то он вызовется 10 раз 
});

Последний раз редактировалось Hoshinokoe, 21.12.2012 в 12:36.
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2012, 13:07
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Сообщение от Hoshinokoe Посмотреть сообщение
krasovsky,
Спасибо за ответ!Работает!
Хотя проблему не совсем решило..дело в том что ('.cll') скорее всего будет один на странице, с display:none.
Я переписал немного код:

$('<span class="cll" style="color: red;">123</span>').insertAfter('body');
//Допустим что он у нас уже добавлен в html где то с position:absolute

$.fn.btn = function () {
    var th = this; //ссылка на btn вызвавший ф-ю
    th.click(function () {
       
        $('.cll').click(function () { // некст уже не помогает вот тут и основная проблема, как привязать ссылку th к cll? Как использовать поиск?
            th.append('test'); 
        });
    });
};

$('.btn').one(function () {
    $(this).btn(); //чтоб вызывался 1 раз.
                     
});

Заранее спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2012, 14:20
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

вообще то this надо было обернуть в $(this), не?

$('<span class="cll" style="color: red;">123</span>').insertAfter('body');
//Допустим что он у нас уже добавлен в html где то с position:absolute

$.fn.btn = function () {
    var th = $(this); //ссылка на btn вызвавший ф-ю
    th.click(function () {
       
        $('.cll').click(function () { // некст уже не помогает вот тут и основная проблема, как привязать ссылку th к cll? Как использовать поиск?
            th.append('test'); 
        });
    });
};

$('.btn').one(function () {
    $(this).btn(); //чтоб вызывался 1 раз.
                     
});
Ответить с цитированием
  #5 (permalink)  
Старый 21.12.2012, 14:31
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

В строке 15 уже обернуто.
Ответить с цитированием
  #6 (permalink)  
Старый 21.12.2012, 19:34
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

krasovsky,
Опиши полную картину того, что тебе нужно. Ибо начинается какое-то костыляние непонятно чего.
Ответить с цитированием
  #7 (permalink)  
Старый 23.12.2012, 17:01
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Hoshinokoe,
Ну грубо говоря тут имитируется тулпанель, которая прописана в коде html.('.cll')
При наведении на блок с классом ('.btn') она всплывает и нажимая на ней кнопки (в данный момент нажимая на нее саму) в этот .btn должен вставляться текст ('test'). А так как btn-ов несколько этот текс не должен вставляться в них во все, а только в тот на котором всплыла тулпанель
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
getElementsByTagName для нескольких тэгов MaxB Events/DOM/Window 11 07.12.2011 22:29
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
zoom для нескольких фото kodermax jQuery 1 20.02.2009 15:46
Как сделать функцию типа toDataUrl для рисунка в ie6 ? Олег Общие вопросы Javascript 2 14.09.2008 00:06