Wordpress / jQuery 同一类别中的帖子或图片的悬停效果

Question

我有一个使用同位素进行过滤和排序的 WP 作品集网站。它运作良好；但是，我想做的一件事就是不起作用。

当我将鼠标悬停在投资组合页面上的图像上时，我希望它突出显示该类别中的所有其他图像。我可以使用 jQuery 手动添加每个类别。其投资组合的人将添加更多类别，并且每次添加内容时都无法进入并 fiddle 使用 .js 文件。

我确定有办法，我只是不知道如何编写代码。我有这个，它工作得很好，但我希望它能够动态工作，而不必专门定义类别。

    $('.portfolio_categories-mood-images').bind('hover', function(e){
    $('.portfolio_categories-mood-images').each(function(i){
    $(this).toggleClass('highlight-all');
    }, function() { $(this).removeClass('highlight-all'); }); });

我不确定我说的是否有道理。我对 jQuery 和 Javascript 还是很陌生，所以在此先感谢您的耐心等待。

Answer 1

重做：

根据您对每个图像的 <div> 代码外观的回应，查看此修订版是否效果更好。为了清楚起见，我做了注释：

<script>
// Use a more general selection type that will grab portfolio images
$(".portfolio_item").hover(
function() {
    // Get the data contained in category
    var ThisData    =   $(this).data('category');
    // Split it with spaces since there are multiple space-separated tags
    var GetClass    =   ThisData.split(" ");
    // Since you have same-name classes as the array value 0 (presumably)
    // you can just use the category value 0 for class name
    $("."+GetClass[0]).addClass('highlight-all');
},
function() {
    // Just remove the class from all elements
    $(".portfolio_item").removeClass('highlight-all');
});
</script>

Wordpress / jQuery 同一类别中的帖子或图片的悬停效果

Wordpress / jQuery Hover Effect for Posts or Images in Same Category

php

jquery

css

wordpress

categories