Несколько селекторов переменных jquery

0

У меня есть таблица, каждая "<tr>" имеет div. Каждый div имеет динамический класс (например) ->

class="name<?php echo $id?>"

Теперь каждый "<tr>" также имеет другой, который по умолчанию является "display: none". Также в каждом "<tr>" находится еще один div, содержащий простой текст "Open".

То, что я пытаюсь достичь, - это... когда я нажимаю открытый текст, он должен "отображать: блокировать" div для ТОЧНО, ЧТО "<tr>", а не для ВСЕХ.

Я пробовал:

<script>

var adida = <?php echo $this->row->id; ?>

jQuery(document).ready(function(){
    jQuery("#vj"+adida).click(function(){
    jQuery(".opt"+adida).toggle();
    });
});

Я поместил этот скрипт в EACH "<tr>", наверху... но он, похоже, не работает.. ничего не происходит... может кто-нибудь, пожалуйста, помогите мне. спасибо

PS Если я посмотрю исходный код в скрипте в строке ->

var adida = <?php echo $this->row->id; ?>

Я вижу, что он показывает CORRECT... поэтому в каждом "<tr>" это показывает, например

var adida = 559;
  • 0
    Было бы намного проще просто использовать один общий класс для всех элементов и обычные методы обхода DOM, чтобы найти связанные элементы для каждого экземпляра и т. Д.
  • 1
    Вы можете создать скрипку с помощью HTML?
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ

Не забывайте придерживаться уникальных классов в строках таблицы. Когда срабатывает событие click, вы можете получить элемент, который был нажат из контекста. Из этого вы можете перемещаться по DOM до строки таблицы, а затем вниз до требуемого div.

Например:

<table>
  <tr>
    <td><button>open</button></td>
    <td><div style="display: none;">Hidden by default</div></td>
  </tr>
    <tr>
    <td><button>open</button></td>
    <td><div style="display: none;">Hidden by default</div></td>
  </tr>
    <tr>
    <td><button>open</button></td>
    <td><div style="display: none;">Hidden by default</div></td>
  </tr>
    <tr>
    <td><button>open</button></td>
    <td><div style="display: none;">Hidden by default</div></td>
  </tr>
  </table>
  <script>
    jQuery('table button').on('click', function (evt) {
      var $button = $(this);
      var $tr = $button.parents('tr');
      var $div = $tr.find('div');
      $div.show();
    });
  </script>
Поделиться
  • 0
    Да. это оно. он отлично работает с этим кодом :) спасибо
  • 0
    Здравствуй. Не могли бы вы помочь с еще одной вещью по этому вопросу, в данный момент, если вы нажмете на другую кнопку «открыть», ДРУГОЕ, что было открыто, ВСЕ ЕЩЕ остается открытым ... Есть ли способ, чтобы, если я открываю один <div> другой "открыт <div> закрывается ...? Спасибо
Показать ещё 1 комментарий
0

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

Предполагая этот HTML-код

<table id="mytable">
  <tr>
    <td><button>Click here</button></td>
    <td><div>misc content</div></td>
  </tr>
  <tr>
     <td><button>Click here</button></td>
     <td><div>misc content</div></td>
  </tr>
</table>

JS

  <script>
    $(function(){
        $('#mytable').on('click', function(e){
          var $b = $(e.target);
          if($b.is('button')){
            $b.closest('tr').find('div').show();
            // eventually e.stopPropagation(); AND/OR return false;
          }
        });
    });
  </script>

Стиль

#mytable div{
    display:none
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню