За последние 24 часа нас посетили 8564 программиста и 440 роботов. Сейчас ищут 162 программиста ...

Фильтр позиций jquery

Тема в разделе "Сделайте за меня", создана пользователем radioactive, 16 июн 2019.

Метки:
  1. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    HTML:
    1.  
    2. <div id="names">
    3.   <h3>Найдено</h3><br>
    4.   <div class="name1">name 1</div>
    5.   <div class="name2">name 2</div>
    6. </div>
    7.  
    8.  
    9.     <tr>
    10.         <td valign="top">
    11.             <table id="table" class="tabl">
    12.                 <tr>
    13.                     <th>Никнейм</th><th>дата</th>
    14.                 </tr>
    15.                 <tr data-id="name1">
    16.                     <td>name 1</th><td>date 1</th>
    17.                 </tr>
    18.                 <tr data-id="name2">
    19.                     <td>name 2</th><td>date 2</th>
    20.                 </tr>
    21.                 <tr data-id="name1">
    22.                     <td>name 1</th><td>date 1</th>
    23.                 </tr>
    24.             </table>
    25.         </td>
    26.         <td valign="top">
    27.             <table id="tablem" class="tabl">
    28.                 <tr>
    29.                     <th>Никнейм</th><th>позиция</th
    30.                </tr>
    31.                 <tr data-id="name1">
    32.                     <td>name 1</th><td>position 1</th>
    33.                 </tr>
    34.                 <tr data-id="name2">
    35.                     <td>name 2</th><td>position 2</th>
    36.                 </tr>
    37.                 <tr data-id="name2">
    38.                     <td>name 2</th><td>position 2</th>
    39.                 </tr>
    40.             </table>
    41.         </td>
    42.     </tr>
    43.  
    44.  
    45.  
    Вечер добрый!
    мне необходима функция фильтра на jquery, задача сделать так чтобы при нажатии на class=name1 - в таблицах оставалась только соответствующиe data-id позиции
    Прошу учесть что позиции по data-id могут повторятся
    с меня + разумеется
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.196
    Симпатии:
    376
    radioactive нравится это.
  3. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    А если так? (плюс поставил) =)
     
  4. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.196
    Симпатии:
    376
    не, так не работает. Ты должен сам начать делать, а мы уж подсобим =)
     
    radioactive нравится это.
  5. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    6.685
    Симпатии:
    1.058
    Адрес:
    Лень
    я кетчуп сегодня забыл купить. Задача такова, вернуться на улицу, пройтись до магазина и купить кетчуп "особо" острый, поможешь ?
     
  6. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    я забыл добавить что фильтров может быть много, то есть нажму class=name1 и class=name2 - отображаются только они а class=name3 нет и т.д


    Я бы мог взять какой либо простой слайдер (функцию), коих много, чутка поправить и родить нечто подобное https://jsfiddle.net/Radioactive/yn80z5q7/, но я не понимаю как сделать множественный выбор, но начало есть!)

    з.ы
    в первом посте html кривой, ниже ровный
    HTML:
    1.  
    2. <div id="names">
    3.   <h3>Найдено</h3><br>
    4.   <div class="name1">name 1</div>
    5.   <div class="name2">name 2</div>
    6. </div>
    7.  
    8.  
    9.   <tr>
    10.     <td valign="top">
    11.       <table id="table" class="tabl">
    12.         <tr>
    13.           <th>Никнейм</th>
    14.           <th>дата</th>
    15.         </tr>
    16.         <tr class="position" data-id="name1">
    17.           <td>name 1</td>
    18.           <td>date 1</td>
    19.         </tr>
    20.         <tr class="position" data-id="name2">
    21.           <td>name 2</td>
    22.           <td>date 2</td>
    23.         </tr>
    24.         <tr class="position" data-id="name1">
    25.           <td>name 1</td>
    26.           <td>date 1</td>
    27.         </tr>
    28.       </table>
    29.     </td>
    30.     <td valign="top">
    31.       <table id="tablem" class="tabl">
    32.         <tr>
    33.           <th>Никнейм</th>
    34.           <th>позиция</th>
    35.         </tr>
    36.         <tr class="position" data-id="name1">
    37.           <td>name 1</td>
    38.           <td>position 1</td>
    39.         </tr>
    40.         <tr class="position" data-id="name2">
    41.           <td>name 2</td>
    42.           <td>position 2</td>
    43.         </tr>
    44.         <tr class="position" data-id="name2">
    45.           <td>name 2</td>
    46.           <td>position 2</td>
    47.         </tr>
    48.       </table>
    49.     </td>
    50.   </tr>
    51.  
    52.  
     
  7. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.196
    Симпатии:
    376
    @radioactive мне кажется ты вообще не понимаешь что у тебя там происходит, вот скажем так шаблон. Две таблицы, когда в поиск вводишь что то, оно отображается в консоле. Так же происходит цикл по таблице. Доделай из него фильт по таблице:
    HTML:
    1.  
    2. <!doctype html>
    3. <html lang="en">
    4. <!-- Required meta tags -->
    5. <meta charset="utf-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    7.  
    8. <!-- Bootstrap CSS -->
    9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    10.  
    11. <title>find table </title>
    12. </head>
    13. <label>Поиск в таблице:</label>
    14. <input type="text" class="form-control" id="findIabe">
    15. <table class="table">
    16. <thead class="thead-dark">
    17. <tr>
    18. <th scope="col">#</th>
    19. <th scope="col">First</th>
    20. <th scope="col">Last</th>
    21. <th scope="col">Handle</th>
    22. </tr>
    23. <tr>
    24. <th scope="row">1</th>
    25. <td>Mark</td>
    26. <td>Otto</td>
    27. <td>@mdo</td>
    28. </tr>
    29. <tr>
    30. <th scope="row">2</th>
    31. <td>Jacob</td>
    32. <td>Thornton</td>
    33. <td>@fat</td>
    34. </tr>
    35. <tr>
    36. <th scope="row">3</th>
    37. <td>Larry</td>
    38. <td>the Bird</td>
    39. <td>@twitter</td>
    40. </tr>
    41. <br>
    42. <table class="table">
    43. <thead class="thead-light">
    44. <tr>
    45. <th scope="col">#</th>
    46. <th scope="col">First</th>
    47. <th scope="col">Last</th>
    48. <th scope="col">Handle</th>
    49. </tr>
    50. <tr>
    51. <th scope="row">1</th>
    52. <td>Mark</td>
    53. <td>Otto</td>
    54. <td>@mdo</td>
    55. </tr>
    56. <tr>
    57. <th scope="row">2</th>
    58. <td>Jacob</td>
    59. <td>Thornton</td>
    60. <td>@fat</td>
    61. </tr>
    62. <tr>
    63. <th scope="row">3</th>
    64. <td>Larry</td>
    65. <td>the Bird</td>
    66. <td>@twitter</td>
    67. </tr>
    68. var findIabe = document.getElementById('findIabe'),
    69. elements = document.querySelectorAll('tr > td');
    70.  
    71. findIabe.addEventListener('keyup', function() {
    72.  
    73. console.log(this.value);
    74.  
    75. [].forEach.call(elements, function(item){
    76. console.log(item.innerHTML);
    77. })
    78. });
    79.  
    80. </body>
    81. </html>
    82.  
     
    #7 Artur_hopf, 16 июн 2019
    Последнее редактирование: 16 июн 2019
    radioactive нравится это.
  8. keren

    keren Новичок

    С нами с:
    15 ноя 2017
    Сообщения:
    513
    Симпатии:
    42
    @Artur_hopf хочешь помочь @radioactive, добавил бы на кетчуп чем бред выкладывать =)
     
  9. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    Да мне не поиск элемента надо а множественный выбор элементов или множественный поиск(выбор)
    жаль я сразу в первом после не указал, прошло более 20 минут как я заметил

    + js я не знаю а вот с jquery сталкивался уже

    я нашел подходящий пример http://jsfiddle.net/XPUrt/7/ сейчас сижу тыкаю
     
  10. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    Код (Javascript):
    1. $(document).ready(function() {
    2.   $(".series-selector-items > li").click(function() {
    3.     $(this).toggleClass('selected');
    4.     filterItems();
    5.   });
    6. });
    7.  
    8. function filterItems() {
    9.   var classSelectors = $(".selected").map(function() {
    10.     return this.id;
    11.   }).toArray();
    12.  
    13.   if (!classSelectors.length) {
    14.     $('#items li').show('slow');
    15.   }
    16.   $('#items li').filter(classSelectors).show('slow');
    17.  
    18.   $('#items li').not(function() {
    19.     var self = this;
    20.     var showThis = true;
    21.     $(this).data('class', 'value');
    22.     $.each(classSelectors, function(i, value) {
    23.       if (!$(self).is(value)) {
    24.         showThis = false
    25.       }
    26.     });
    27.     return showThis;
    28.   }).hide('slow');
    29. }
    подскажите где ошибка http://jsfiddle.net/9nreyk8h/
     
  11. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    6.685
    Симпатии:
    1.058
    Адрес:
    Лень
    в кетчупе... Теперь у меня ужин - Сделано #картошка без кетчупа.
     
  12. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    Не я понимаю что тут мне не обязаны отвечать и помогать но ты тут тупо флудишь, пользы от тебя сегодня абсолютный ноль, не жалко тут время тратить?
     
  13. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    6.685
    Симпатии:
    1.058
    Адрес:
    Лень
    неа, потому что у себя уже реализацию давно сделал. Кетчупа только не хватает.
     
  14. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    Молодец, теперь сиди тут и набивай счетчик сообщений
     
  15. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    6.685
    Симпатии:
    1.058
    Адрес:
    Лень
    пасиба за разрешение
     
  16. master-web

    master-web Новичок

    С нами с:
    29 май 2019
    Сообщения:
    44
    Симпатии:
    16
    @radioactive для фильтрации вместо класса лучше использовать атрибут data
    Например, тот же data-id
    HTML:
    1. <div id="names">
    2.     <h3>Найдено</h3><br>
    3.     <div class="toggle" data-id="name1">name 1</div>
    4.     <div class="toggle" data-id="name2">name 2</div>
    5. </div>
    Тогда логика переключателя будет выглядеть примерно так
    Код (Javascript):
    1. $(document).on('click', '#names .toggle', function(){
    2.     var dataID = $(this).attr('data-id');
    3.     $('table tr[data-id]').hide();
    4.     $('table tr[data-id="'+dataID+'"]').show();
    5. });
     
    radioactive нравится это.
  17. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    Спасибо за ответ, можно ли доработать скрипт для множественного выбора?

    Или вот я нашел скрипт http://jsfiddle.net/XPUrt/7 но я не могу адекватно его подстроить под себя, максимум что смог это - http://jsfiddle.net/jke0v6aw/ где не могу настроить отображение выбранных полей, работает только скрытие)
     
  18. master-web

    master-web Новичок

    С нами с:
    29 май 2019
    Сообщения:
    44
    Симпатии:
    16
    Можно сделать так
    Код (Javascript):
    1. $(document).on('click', '#names .toggle', function(){
    2.     $(this).toggleClass('active');
    3.     var toggleActive = $('#names .toggle.active');
    4.     if(toggleActive.length > 0){
    5.         $('table tr[data-id]').hide();
    6.         toggleActive.each(function(){
    7.             var dataID = $(this).attr('data-id');
    8.             $('table tr[data-id="'+dataID+'"]').show();
    9.         });
    10.     }else{
    11.         $('table tr[data-id]').show();
    12.     }
    13. });
    Ну а чтобы закрашивать активные кнопки, добавьте стили
    Код (CSS):
    1. .toggle{
    2.     display: inline-block;
    3. }
    4. .toggle.active{
    5.     background: green;
    6. }
     
    radioactive нравится это.
  19. radioactive

    radioactive Новичок

    С нами с:
    24 сен 2016
    Сообщения:
    32
    Симпатии:
    1
    Это работает!, благодарю за помощь, все плюсы ваши)