Изменение функции «Добавить в избранное» с <tr>на <tbody> - PullRequest
Новая
       0

Изменение функции «Добавить в избранное» с <tr>на <tbody>

1 голос
/ 08 мая 2020

У меня есть код для группы книг, в которых есть любимая кнопка напротив каждого tr

Вот код, который я получил 

$(function() {
  $('tr').click(function(e) {
    const $parentTable = $(this).closest("table");
    $(this).find('img.white-star').toggle();
    $(this).find('img.yellow-star').toggle();
    const $favs = $("tr").has('img.yellow-star:visible');
    $parentTable.prepend($favs)
    const favs = $favs.find("td:first").map((i, fav) => $(fav).data("id")).get();
    //localStorage.setItem($parentTable.attr("id")+"favs",JSON.stringify(favs)); // uncomment this on server
  })
  let favs // = localStorage.getItem($(".ratingTable").attr("id")+"favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["Book A", "Book C"]; // remove this after testing
  $.each(favs, function(i, fav) {
    $("table tr td[data-id='" + fav + "']").each(function() {
      $(this).parent().trigger("click")
    });
  });
});
td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="ratingTable" id="table1">
  <tr>
    <td data-id="Book A">Magic by dalton</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td data-id="Book B">The chair by Jhon</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td data-id="Book C"> Book C</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
</table>

В настоящее время я пытаюсь сделать сайт похожим на youtube. Я хотел бы, чтобы вышеупомянутый параметр рейтинга был добавлен в список видео. - это код, с которым я работаю

Я хотел бы иметь следующее: когда пользователь оценивает рейтинг кликов, я хочу, чтобы сохранялась не только tr названия видео, но и все tr & td под этим телом должны быть выбраны и сохранены в localstorage & сохраняется при обновлении страницы, но в списке книг выбирается и сохраняется только tr. Надеюсь, вы это понимаете.

Кнопка «Рейтинг» или «Добавить в избранное» перенесена с tr на tbody. Любая помощь приветствуется. Спасибо 

.white-star,
.yellow-star {
  height: 25px;
}

.hide {
  display: none;
}

.ratingTable {
  width: 400px;
}

td {
  cursor: pointer;
}

td[data-id] {
  width: 300px;
}

#table1 {
  width: 100%;
}
<table id="Music">
  <tbody data-id="Video-A" class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
</table>

<table id="Art">

  <tbody data-id="Video-B" class="searchable art">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>
</table>

<table id="Art">
  <tbody data-id="Video-D" class="searchable dance">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 08 мая 2020

Вам нужно везде заменить td на tbody

и изменить на это 

 $("table tbody[data-id='" + fav + "']").each(function() {

ПРИМЕЧАНИЕ: у вас не может быть более одной вещи в каждом tbody, чтобы это работало, и ВСЕ тела имеют быть в той же таблице

  • $(".fav").on("click",clickIt) изменить на const $tbody = $(e.target).closest("tbody");
  • удалить find("tbody") на карте
  • Требуется восстановление <table class="ratingTable" id="videorating">

Полный код

https://plungjan.name/SO/bookrating/vidrate.html

const clickIt = (e) => {
  const $tbody = $(e.target).closest("tbody");
  console.log($tbody.data("id"))
  const $parentTable = $tbody.closest("table");
  $tbody.find('img.white-star').toggle();
  $tbody.find('img.yellow-star').toggle();
  const $favs = $("tbody").has('img.yellow-star:visible');
  $parentTable.prepend($favs)
  const favs = $favs.map((i, fav) => $(fav).data("id")).get();
  //localStorage.setItem($parentTable.attr("id")+"favs",JSON.stringify(favs)); // uncomment this on server
};

$(function() {
  $('.fav').click(clickIt)
  let favs // = localStorage.getItem($(".ratingTable").attr("id")+"favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["Video-A", "Video-D"]; // remove this after testing
  $.each(favs, function(i, fav) {
    $("table tbody[data-id='" + fav + "']").each(function() {
      $(this).click()
    });
  });
});
td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="ratingTable" id="videorating">
  <tbody data-id="Video-A" class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a">Video-A: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
  <tbody data-id="Video-B" class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a">Video-B: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music </a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
  <tbody data-id="Video-C" class="searchable art">
    <tr class="row">
      <td rowspan="4" class="a">Video-C: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>
  <tbody data-id="Video-D" class="searchable dance">
    <tr class="row">
      <td rowspan="4" class="a">Video-D: <img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
      <td rowspan="4">
        <div class="fav">
          <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
          <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
        </div>
      </td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...