Jquery find (), чтобы получить Icon <i>Class

Question

Я очень плохо знаком с jquery и не смог найти решение своей проблемы.У меня есть таблица, созданная для некоторых сообщений.В начале строки сообщений есть значок fontawesome, показывающий, что сообщение не развернуто.После того, как я нажал и развернул, я хочу, чтобы этот значок изменился на другойЯ играл с функцией, найденной в другом месте на этом сайте, которая использует значение первого <td> в строке, чтобы показать либо +, либо -.

Вот функция, за которой следует моя таблица:

$(function() {
    $("td[colspan=7]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.closest("td").children("p").slideUp();

            $target.closest("tr").prev().find("td:first").html("+");//NOT MINE - CHANGE

        } else {
            $target.closest("tr").next().find("p").slideToggle();

            if ($target.closest("tr").find("td:first").html() == "+")//NOT MINE - CHANGE
                $target.closest("tr").find("td:first").html("-");//NOT MINE - CHANGE
            else
                $target.closest("tr").find("td:first").html("+"); //NOT MINE - CHANGE

        }                    
    });
});

...

                    echo "<tr class='message-body'>";
                    echo "<th><i class='far fa-envelope'></i> ".$title."</th>";
                    echo "<th></th>";
                    echo "<th>".$date."</th>";
                    echo "<th></th>";
                    echo "<th></th>";
                    echo "<th></th>";
                    echo '<th><div class="right"><form method="post" action="">
                        <input type="hidden" name="id" value="'.$id.'">
                        <button class="rem-button"> Delete</button></form></div></th>';
                    echo "</tr>";
                    echo "<tr colspan='7'><td class='message-body-body' colspan='7'><p><br>".$body."</p></td></tr>";

В идеале я хочу сделать что-то вроде:

closed-> первый <i> класс = дальний фа-конверт

открыт -> первый <i> класс = дальний фа-конверт

РЕДАКТИРОВАТЬ

В настоящее время функция позволяет мне щелкнуть строку и развернуть ее, чтобы показать тело сообщения.Перед расширением хочу сохранить значок envelope.После расширения я хочу, чтобы этот значок изменился на envelope-open.

РЕДАКТИРОВАТЬ 2

Мне нужна эта строка

$target.closest("tr").prev().find("td:first").html("+");

изменена на эту(но функционально)

$target.closest("tr").prev().find("i:first").class.html("far fa-envelope");

другие строки, которые необходимо изменить, аналогичным образом будут

РЕДАКТИРОВАТЬ 3 решение, на котором основан мой вопросиз

РЕДАКТИРОВАТЬ 4 My Fiddle Не уверен, как связать Fontawesome здесь

Answer 1

Как обсуждалось в комментариях, по моему мнению <th> должно быть зарезервировано для заголовков столбцов.Затем вы можете поместить содержимое вашего сообщения в теги <td>.Также, скрывая тег <p> по умолчанию, его не нужно скрывать.

Для переключения классов вы можете использовать метод toggleClass().Вот пример, который я привел вместе с моими предложениями к тому, что вы предоставили.Вы можете дополнительно оптимизировать его, добавив классы к каждому <td>, что позволит вам удалить first() и настроить элементы по отдельности.

$(function() {
  $("table").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target.parentNode);
	
    $target.children().first().find('i')
    .toggleClass("fa-envelope fa-envelope-open");
    
    $target.next().find(".message-body-body").slideToggle();
  });
});

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
}
th {
background-color: #ccc;
}
.message-row {
  cursor: pointer;
}
.message-body-body {
  padding: 20px;
  background-color: #f5f5f5;
  /* prevents element from flashes when page is loaded */
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tr class='message-body'>
    <th></th>
    <th>Date</th>
    <th>Title</th>
    <th>To</th>
    <th>From</th>
    <th>Action</th>
  </tr>
  <tr class="message-row">
    <td><i class='far fa-envelope message-icon'></i></td>
    <td>09/26/2019</td>
    <td>Message #1</td>
    <td>someone@demo.com</td>
    <td>someone@demo.com</td>
    <td>
      <div class="right">
        <form method="post" action="">
          <input type="hidden" name="id" value="20">
          <button class="rem-button"> Delete</button>
        </form>
      </div>
    </td>
  </tr>
  <tr colspan='6'>
    <td class='message-body-body' colspan='6'>
      This is the message body #1
    </td>
  </tr>
  <tr class="message-row">
    <td><i class='far fa-envelope message-icon'></i></td>
    <td>09/26/2019</td>
    <td>Message #2</td>
    <td>someone@demo.com</td>
    <td>someone@demo.com</td>
    <td>
      <div class="right">
        <form method="post" action="">
          <input type="hidden" name="id" value="20">
          <button class="rem-button"> Delete</button>
        </form>
      </div>
    </td>
  </tr>
  <tr colspan='6'>
    <td class='message-body-body' colspan='6'>
      This is the message body #2
    </td>
  </tr>
</table>

Answer 2

Попробуйте:

$target.closest("tr").prev().find("i:first").toggleClass("fa-envelope fa-envelope-open");

Другое возможное решение:

$('#message-table').find('th:first-child i').toggleClass("fa-envelope fa-envelope-open");

Рабочая скрипка: https://jsfiddle.net/gbhsa19v/