Jquery find() 获取 Icon <i> 类

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>";

理想情况下，我想做这样的事情：

闭合 -> 第一个<i>类是 = 远 FA 包络

打开 -> 第一个<i>类是 = 远 FA-信封-打开

编辑

目前，该函数允许我单击一行并展开以显示消息的正文。在展开之前，我想保留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我的小提琴不确定如何在这里链接字体真棒

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>[e-mail]</td>
<td>[e-mail]</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>[e-mail]</td>
<td>[e-mail]</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/