使用JQuery動態地隱藏/顯示​​

Question

使用PHP，我返回一個包含每個包含3列的行的表。第三欄有一個隱藏的信息圖標，除非懸停。下面是來自PHP代碼生成該表的代碼段：

$contoutput = $contoutput . '<tr><td>' . $xleft[$i] . '</td><td>' . $xright[$i] . '</td><td class="hiddensourceicon" onMouseOver="showicon(this);">' . findsource($xsource[$i]) . '</td></tr>'; 

爲hiddensourceicon的CSS很簡單：

.hiddensourceicon {顯示：無; }

這樣，所述圖標在加載時不顯示。我使用jQuery刪除這個類，因此「取消隱藏」圖標在懸停：

function showicon(row2show){ $(row2show).removeClass("hiddensourceicon"); } 

但由於某些原因，jQuery函數拒絕觸發。我究竟做錯了什麼？

Answer 1

它覺得麻煩來當你有東西設置爲無顯示，並試圖懸停在索姆不存在的一種方法可以解決這個問題，那就是使用不透明度而不是顯示。如果你想繼續使用顯示器，你將不得不考慮屏幕上必須存在的東西才能懸停。這是使用不透明度的快速解決方案。

的jsfiddle：https://jsfiddle.net/kriscoulson/kg6380z8/1/

你也應該使用內聯JavaScript望而卻步。 例如mouseover =「function（args）;」

var $hiddenicon = $('.hiddenicon'); 
 

 
$hiddenicon.on('mouseover mouseout', function() { 
 
    var opacity = $(this).css('opacity') == 1 ? 0 : 1; 
 
    $(this).css({ 
 
    opacity: opacity 
 
    }); 
 
});

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
} 
 
.hiddenicon { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="hiddenicon">Icon</td> 
 
    <td>Things in here</td> 
 
    <td>Other things in here</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hiddenicon">Icon</td> 
 
    <td>Things in here</td> 
 
    <td>Other things in here</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hiddenicon">Icon</td> 
 
    <td>Things in here</td> 
 
    <td>Other things in here</td> 
 
    </tr> 
 
</table>

Answer 2

隱藏顯示一遍後你需要顯示：塊，否則它不會顯示，因爲你是使用jQuery你可以使用.hide（）和.show（）方法參考 - http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 3

試試這個：你對你目前的問題跑起來

<?php 
$contoutput = $contoutput . '<table cellspacing="5"><tr><td>' . "11" . '</td><td>' . "2222" . '</td><td id="xyz" onMouseOver="showicon(this.id);"><span class="hiddensourceicon" >' . "hiiiii" . '</span></td></tr></table>'; 
echo $contoutput; 
?> 
<style> 
.hiddensourceicon { display: none; } 
</style> 
<script> 
function showicon(row2show){ 
var abc = "#"+row2show+" span"; 

$(abc).removeClass("hiddensourceicon"); } 
</script> 

Answer 4

一個問題：hiddensourceicon設置爲display:none，所以沒有什麼懸停。如果將其設置爲opacity:0，它仍然會在那裏懸停。另外，opacity可以動畫 - 可能需要也可能不需要。

下面是一個方法，也許別人會有一些更高效，and here's a fiddle of it：

$contoutput = $contoutput . '<tr><td>' . $xleft[$i] . '</td><td>' . $xright[$i] . '</td><td class="hiddensourceicon">' . findsource($xsource[$i]) . '</td></tr>'; 

CSS：

.hiddensourceicon { 
    opacity:0; 
} 

.show { 
    opacity:1; 
} 

的jQuery：

$(".hiddensourceicon").hover(function() { 
    $(this).toggleClass('show'); 
});