javascript - 如何使 jQuery 中的悬停功能单独应用于数据库图像？

Question

我有一个本地数据库，正如您在下面的 PHP 代码中看到的那样，我从数据库中获取图像并将它们显示在我的网页上。

在我的 jQuery 脚本中，我告诉它更改 CSS 功能 z-index 和 border color，并在鼠标悬停在图像上时应用灰度滤镜。 (我将在我的问题得到回答后添加更多效果，所以请不要建议只使用 CSS :) )

但是，当我这样做时，它会将效果应用于所有图像，因为它们都属于 .singleproject 类。显然，我只希望效果显示在我用鼠标悬停的单个图像上，而不是同时出现在所有图像上。有谁知道使用 jQuery 执行此操作的最有效方法是什么？

//JS文件:

$(".singleproject").hover(function(){
    $(".textproject").css("z-index", 0);
    $("#projects img").css("border-color", "#34475e");
    $("#projects img").css("-webkit-filter", "grayscale(0)");

}, function(){
    $(".textproject").css("z-index", -1);
    $("#projects img").css("border-color", "#cecece");
    $("#projects img").css("-webkit-filter", "grayscale(1)");
});

---

//PHP 文件:

<script type="text/javascript" src="javascript/portfoliotext.js" defer></script> 

require_once("php/connectie.php");


$projectquery="SELECT * FROM projecten ORDER BY projectid DESC LIMIT 15";
$projectresult= mysqli_query($con, $projectquery);

while($projectrow = mysqli_fetch_array($projectresult)){
    echo "<a href='projects/" . $projectrow['projectafbeelding'] 
    . "' rel='lightbox'><div class='singleproject'><img src='projects/" . $projectrow['projectafbeelding'] . "'/>";
    echo "<div class='textproject'><h4>" . $projectrow['projectnaam'] . "</h4>";
    echo "<p>"  . $projectrow['projectbeschrijving'] . "</p>";
    echo "</div></div></a>";
}

Answer 1

与您的答案直接相关，您需要将类名换成“this”并找到相关元素。

$(".singleproject").hover(function() {
    $(this).find(".textproject").css("z-index", 0);        
}, function(){
    $(this).find(".textproject").css("z-index", -1);
}

至于其他元素，我看不到任何带有 id #projects 的元素，但我假设您想要类似的东西。

$(this).find('img').css(/* whatever */);

但是，请注意，您最好使用 CSS 而不是 JS 来执行此操作。我会让你看看那个:)

这是一个工作 j sfiddle demo