Блог

Главная - Вопросы по программированию - Привязка , но не содержащая привязку, с использованием jQuery

Привязка , но не содержащая привязку, с использованием jQuery

#jquery #html-table #anchor

#jquery #html-таблица #привязка

Вопрос:

Обновление: ссылки теперь работают, но стрелки по-прежнему проблематичны.

Я работаю над http://www.boulderdispensaries.com /

Под картой, если вы нажмете на строку, появится строка под ней. Даже если вы нажмете ссылку в строке. Кроме того, если щелкнуть строку, а затем щелкнуть строку выше, стрелка вправо не поворачивается вниз. Как я могу это исправить, чтобы щелчок по ссылке в строке переходил к ссылке, а стрелки работали правильно?

Для скрипачей: http://jsfiddle.net/yFkNf /

Я также вставил приведенный ниже код.

jQuery:

 $(document).ready(function() {

  var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">';
  var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">';
  var is_visible = false;

  $('tr:odd td').addClass('expand');
    // this is the hack I was using to get the links to work, but then the bind doesn't
//  $('tr:odd td:nth-child(1)').removeClass('expand');
//  $('tr:odd td:nth-child(2)').removeClass('expand');
//  $('tr:odd td:nth-child(4)').removeClass('expand');
  $('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">' showText '</a> amp;nbsp;');

  $('.toggle').hide();

  $('a.toggleLink').click(function() {
      is_visible = !is_visible;
      $(this).html( (!is_visible) ? showText : hideText);
      $(this).parent().parent().next('tr').toggle();
      return false;
  });

  $('.expand').click(function(){
      is_visible = !is_visible;
      $(this).parent().find('a.toggleLink').html( (!is_visible) ? showText : hideText);
      $(this).parent().next('tr').toggle();
      return false;
  });

});

Вот формат каждых двух строк:

 <tr>
  <td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td>
  <td><a href="http://maps.google.com/etc">2031 16th</a></td>
  <td>(720) 235-4232</td>
  <td><a href="mailto:info@boulderkindcare.com"><img src="email_icon.gif" /></a></td>
  <td nowrap="nowrap">amp;nbsp;</td>
  <td align="center">amp;nbsp;</td>
  <td align="center">amp;nbsp;</td>
  <td align="center">amp;nbsp;</td>
</tr>
<tr class="toggle">
  <td colspan="8">More info coming soon.</td>
</tr>

Ответ №1:

Извините за ответ без кода:

Я полагаю, что вам просто нужно удалить ссылки return false из вашего обработчика кликов. Я думаю, что эта строка явно указывает ссылкам не работать.

Ваша проблема со стрелками заключается в том, что ваша переменная состояния is_visible является глобальной (чего вам следует избегать, кстати), поэтому каждая строка использует одну и ту же переменную. Было бы лучше сохранить это состояние в классе на tr, а затем проверить его onClick . Или, может быть, еще лучше иметь другой обработчик для строк ‘is visible’ на основе этого класса.

Комментарии:

1. return false в основном означает «не делайте того, что вы обычно делаете потом». В случае ссылки это не позволяет браузеру перейти по этой ссылке. Однако строка таблицы или ячейка данных не имеют поведения щелчка по умолчанию, поэтому return false в основном бессмысленны.

2. Верно, я имел в виду его обработчик .toggleLink .

3. Спасибо, ребята! В итоге я вообще избегал is_visible .

Ответ №2:

 $('td a').click(function(event){
    event.stopPropagation();
});

Это предотвратит попадание щелчков по ссылкам привязки внутри TD в TD. Вероятно, вы захотите сделать селектор немного менее обобщенным; вы не предоставили достаточно информации, чтобы я мог правильно настроить его.

Стрелки

Вы используете глобальную переменную для хранения того, расширен ли элемент или нет, но несколько элементов могут быть расширены одновременно. По сути, вам нужно сохранить эту информацию в ссылке переключения или найти другой способ из этого контекста узнать статус расширяемой строки.