изменить другой элемент на .click () - PullRequest
Новая
       18

изменить другой элемент на .click ()

0 голосов
/ 31 августа 2011

Я не уверен, как правильно использовать .click.

Я посмотрел руководство (http://api.jquery.com/click/), но не смог найти ответ на мою проблему:

Я создаю структуру div с помощью JS следующим образом: 

<div>
   <img id='img_1' src="click.gif">
</div>
<div id='content_1'> Text</div>

Множество этих блоков генерируются с помощью следующей функции: В конце каждое изображение получает событие щелчка, чтобы изменить CSS соответствующего текста: щелкните на img_1, чтобы изменить CSS на content_1. Я пробую этот код (упрощенная версия): 

$.each(data, function(selector,content) {
     id=prepare(selector);
     $('#boxDiv').append('    <div>\
                               <img id="img_'+id+'" src="click.gif">\
                             </div>\
                             <div id="content_'+id+'"> Text</div>');
     $('#img_'+id).click(function(a) {
                         $('#content_'+id).css('height','100px');});
});

Но этот код не работает, как я и требовал.

Каждый 'img_'+id Элемент получает связанное с ним событие щелчка (пока, бог) Но функция не меняетсяCSS соответствующего 'content_'+id! Все время последний элемент содержимого изменяется. Похоже, что функция обратного вызова .click не получает id во время добавления события щелчка, но привремя выполнения функции обратного вызова. В настоящее время id является (конечно) всегда последним элементом.

Таким образом, вопрос в том, как перенести текущий (связанный) id внутрь.функция щелчка-отзыва?

// Обновление: я не уверен, может ли использование live () помочь в этом случае: я попробовал это, но безуспешно.Проблема не в отсутствии события клика.Проблема в том, что при каждом нажатии вызывается функция обратного вызова с использованием последнего id.Пример.Сгенерированный контент выглядит следующим образом: 

<div>
   <img id='img_1' src="click.gif">
</div>
<div id='content_1'> Text</div>
<div>
   <img id='img_2' src="click.gif">
</div>
<div id='content_2'> Text</div>
<div>
   <img id='img_3' src="click.gif">
</div>
<div id='content_3'> Text</div>

Код JS привязывает одно нажатие к событию img_1, одно нажатие к img_2 и одно нажатие к img_3.Я изменил содержимое функции обратного вызова на: 

$('#expand_'+id).live('click',function() {console.info(id);});

ТАК, что я вижу содержимое идентификатора: нажав img_1 или img_2 id равен 3. Возможно, потому что 3 является последним значением длякаждая петля.Так, как я могу получить связанный id в обратном вызове?

Спасибо за любую помощь.

Ответы [ 4 ]

1 голос
/ 31 августа 2011

Нашел проблему в скрипке (и ваш обновленный код):

Вы забыли поставить var перед id, что делает его глобальным.Все обработчики событий ссылаются на один и тот же id, и его значение совпадает с значением последней итерации.

Объявите его как 

var id = ....;

, чтобы сделать его локальным.

Тем не менее, я бы использовал jQuery для создания всех элементов: 

$.each(data, function(selector,content) {
     var id = selector;

     var $img = $('<span />', {
         id: 'img_' + id,
         text: 'click'
     }).click(function() {
          $('#content_'+id).css('height','100px');
     });

     var $div = $('<div />', {
         id: 'content_' + id,
         text: 'Text'
     });

     $('<div />').append($img).append($div).appendTo('#boxDiv');
});

Существуют и другие способы найти элементы #content_X.В вашей структуре этот элемент всегда является следующим братом родителя изображения.Поэтому вместо поиска элемента с этим идентификатором внутри обработчика событий вы можете сделать: 

$(this).parent().next().css(...);

Или даже связать обработчик событий с родителем div вместо этого непосредственно с изображением.

0 голосов
/ 31 августа 2011

Обработчик события click будет иметь доступ к переменной id (и content), как это определено в родительской функции.В JavaScript внутренние функции имеют доступ ко всем переменным функции, в которой они определены.

Проблема заключается в том, что вам просто не хватает селектора идентификатора # из пары строк селектора jQuery: 

$('#boxDiv').append('...');
//some code removed
$('#content_' + id).css('height', '100px');
0 голосов
/ 31 августа 2011

Вместо использования функции обратного вызова .click, вам следует использовать функцию обратного вызова .live . Цитирование документов JQuery:

"Описание: Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в future ."

Попробуйте это: 

$.each(data, function(id,content) {
 $('boxDiv').append('    <div>\
                           <img id="img_'+id+'" src="click.gif">\
                         </div>\
                         <div id="content_'+id+'"> Text</div>');
 $('#img_'+id).live('click', function() {
                     $('content_'+id).css('height','100px');});
});
0 голосов
/ 31 августа 2011

Разве вы не имеете в виду 

$.each(data, function(id,content) {
     $('#boxDiv').append('    <div>\
                               <img id="img_'+id+'" src="click.gif">\
                             </div>\
                             <div id="content_'+id+'"> Text</div>');
     $('#img_'+id).click, function(a) {
                         $('#content_'+id).css('height','100px');
     });
});

?Перед идентификатором

пропали два #
...