0
私はfa-square-oをテーブル に持っていて、データベースからデータテーブルを埋めるためにループを使用しています 素晴らしいフォントの2つのアイコンは、fa-star-oであり、もう1つはfa-square-oです。 jQueryをクリックしてアイコンを変更します。 アイコンをクリックするとおそらく動作していますが、他のアイコンが他の行の同じクラスを持っている場合は隠れています。 データテーブル内の行のアイコンを変更すると、各行の他のアイコンに影響が出る
この
はループwhile($row = mysqli_fetch_assoc($qry)){
echo ' <tr>
<td class="col-lg-1">
<span><i class="fa fa-square-o sqr" id="'.$row["id"].'"></i></span>
<span class="fa-m-inv"><i class="fa fa-star-o str" id="'.$row["id"].'"></i></span>
</td>
<td class="col-lg-1">'.$row["name"].'</td>
</tr>
私のjavaスクリプトが
$('.sqr').click(function(){
if ($(this).hasClass("fa-square-o")) {
$("i.fa-square-o").removeClass("fa-square-o");
$(this).addClass("fa-check-square-o");
$(this).css({'color':'blue'});
}else{
$("i.fa-square-o").removeClass("fa-check-square-o");
$(this).addClass("fa-square-o");
$(this).css({'color':'black'});
}
});
$('.str').click(function(){
//var id = $(this).attr("id");
if ($(this).hasClass("fa-star-o")) {
$("i.fa-star-o").removeClass("fa-star-o");
$(this).addClass("fa-star");
$(this).css({'color':'yellow'});
}else{
$("i.fa-star-o").removeClass("fa-star");
$(this).addClass("fa-star-o");
$(this).css({'color':'black'});
}
});
<li class="dropdown li-inv-h">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class=" i-invo"><span class="caret"></span></i></a>
<ul class="dropdown-menu">
<li><a href="#">All</a></li>
<li><a href="#">Nothing</a></li>
<li><a href="#">Is reading</a></li>
<li><a href="#">Not reading</a></li>
<li><a href="#">Delete</a></li>
</ul>
<a href="#"><i class="fa fa-square-o" ></i></a>
</li>
ためのHTMLコードです
T
$('.sqr').click(function(){
\t \t if ($(this).hasClass("fa-square-o")) {
\t \t \t $("i.fa-square-o").removeClass("fa-square-o");
\t \t \t $(this).addClass("fa-check-square-o");
\t \t \t $(this).css({'color':'blue'});
\t \t }else{
\t \t \t $("i.fa-square-o").removeClass("fa-check-square-o");
\t \t \t $(this).addClass("fa-square-o");
\t \t \t $(this).css({'color':'black'});
\t \t }
\t });
\t $('.str').click(function(){
\t \t if ($(this).hasClass("fa-star-o")) {
\t \t \t $("i.fa-star-o").removeClass("fa-star-o");
\t \t \t $(this).addClass("fa-star");
\t \t \t $(this).css({'color':'red'});
\t \t }else{
\t \t \t $("i.fa-star-o").removeClass("fa-star");
\t \t \t $(this).addClass("fa-star-o");
\t \t \t $(this).css({'color':'black'});
\t \t }
\t });<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown li-inv-h">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class=" i-invo"><span class="caret"></span></i></a>
<ul class="dropdown-menu">
<li><a href="#">Checked</a></li>
<li><a href="#">Unchecked</a></li>
<li><a href="#">Reading</a></li>
<li><a href="#">Unreading</a></li>
<li><a href="#">Delete</a></li>
</ul>
<a href="#"><i class="fa fa-square-o" ></i></a>
</li>
<table id="data-table" class="table table-hover">
<thead>
<tr>
<th></th>
<th>User</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-lg-1">
<span>
<i class="fa fa-square-o sqr"></i>
</span>
<span>
<i class="fa fa-star-o str"></i>
</span>
</td>
<td>Name1</td>
</tr>
<tr>
<td class="col-lg-1">
<span>
<i class="fa fa-square-o sqr"></i>
</span>
<span>
<i class="fa fa-star-o str"></i>
</span>
</td>
<td>Name2</td>
</tr>
<tr>
<td class="col-lg-1">
<span>
<i class="fa fa-square-o sqr"></i>
</span>
<span>
<i class="fa fa-star-o str"></i>
</span>
</td>
<td>Name3</td>
</tr>
<tr>
<td class="col-lg-1">
<span>
<i class="fa fa-square-o sqr"></i>
</span>
<span>
<i class="fa fa-star-o str"></i>
</span>
</td>
<td>Name4</td>
</tr>
</tbody>
</table>ない私は、他の列内の他のすべてのアイコンが効果的である行に1つのアイコンをクリックすると、PHPのコードではなく、フォント、アイコンの変更、経由のjavaスクリプトで私のために問題。つまり、この行をクリックすると、各行に空の星が1つずつあることを意味します。この行からは削除され、他の星は黄色で塗りつぶされますが、コードをクリックすると、各行の他のすべての星も削除されます。
私が望むこの問題を解決するには、fa-check-square-oのfa-icon-upper-tableをfa-minus-squareに変更し、行idを配列に追加してdeleteのように1つのイベントを選択する。
は、私はより多くの記事を読んで、ほぼこの
はあなた一人一人に感謝のポストが見つかりません。