如何应用jQuery quicksand（sort）而不丢失基于jQuery的组合悬停？

当使用jQuery应用quicksand（一种用于排序列表的脚本）时，我发现我丢失了列表项的公文包

在有人对列表进行排序后，如何保持列表悬停

问题在于：

流沙代码

// Custom sorting plugin
(function($) {
  $.fn.sorted = function(customOptions) {
  var options = {
  reversed: false,
  by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
  var valA = options.by($(a));
  var valB = options.by($(b));
  if (options.reversed) {
    return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;              
  } else {      
    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;  
  }
});
return $(arr);
  };
})(jQuery);

// DOMContentLoaded
$(function() {

  // bind radiobuttons in the form
  var $filterType = $('#filter input[name="type"]');
  var $filterSort = $('#filter input[name="sort"]');

  // get the first collection
  var $applications = $('#applications');

  // clone applications to get a second collection
  var $data = $applications.clone();

  // attempt to call Quicksand on every form change
  $filterType.add($filterSort).change(function(e) {
    if ($($filterType+':checked').val() == 'all') {
     var $filteredData = $data.find('li');
    } else {
      var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
}

// if sorted by size
if ($('#filter input[name="sort"]:checked').val() == "size") {
  var $sortedData = $filteredData.sorted({
    by: function(v) {
      return parseFloat($(v).find('span[data-type=size]').text());
    }
  });
} else {
  // if sorted by name
  var $sortedData = $filteredData.sorted({
    by: function(v) {
      return $(v).find('strong').text().toLowerCase();
    }
  });
}   

// finally, call quicksand
$applications.quicksand($sortedData, {
  duration: 800,
  easing: 'easeInOutQuad'
    });

  });

});

$(document).ready(function() {

// #################################
// PORTFOLIO GRID
// #################################
$(".portfolio li").hover(function () {
    $(this).find('div.content').fadeIn("fast");
    },
    function() {
        $(this).find('div.content').fadeOut("fast");
    })  

// #################################
// IMAGE FADE OPACITY WHEN HOVER
// #################################
$(function() {

    $(".portfolio div img").css("opacity", "1");

    // ON MOUSE OVER
    $(".portfolio div img").hover(function () {

        // SET OPACITY TO 100%
        $(this).stop().animate({
        opacity: 0.5
        }, "fast");
    },

    // ON MOUSE OUT
    function () {

        // SET OPACITY BACK TO 100%
        $(this).stop().animate({
        opacity: 1
        }, "fast");
    }); 
});

  $('.portfolio .content').each(function() {
    $('.portfolio .content').hover(function() {
      $(".portfolio img").not(this).stop().animate({opacity: 0.6}, 400);
    }, function() {
      $(".portfolio img").not(this).stop().animate({opacity: 1}, 300);      
    });
  });

    // #################################
// Lightbox for images
// #################################
$(".portfolio a.folio-zoom").fancybox({
    'titlePosition'     : 'over'
});


}); // END OF DOCUMENT READY

<!-- Fancybox lightbox -->
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>

<!-- Custom javascript for this template -->
<script type="text/javascript" src="js/portfolio-hover.js"></script> 



<script type="text/javascript" src="js/jQuery.equalHeights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- LOAD HoverAlls --><script type="text/javascript" src="js/jquery.hoveralls.js">            </script>
<!-- LOAD Easing --><script type="text/javascript" src="js/jquery.easing.1.3.min.js">    </script>
<script type="text/javascript">
function setEqualHeight(columns)  
 {  
 var tallestcolumn = 0;  
 columns.each(  
 function()  
 {  
 currentHeight = $(this).height();  
 if(currentHeight > tallestcolumn)  
 {  
 tallestcolumn  = currentHeight;  
 }  
 }  
 );  
 columns.height(tallestcolumn);  
 }  
$(document).ready(function() {  
 setEqualHeight($(".pontent-container > div"));  
`enter code here`});  
</script>

<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
  <script type="text/javascript" src="js/custom.js"></script> 

我的头JS看起来如何

<!-- Fancybox lightbox -->
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>

<!-- Custom javascript for this template -->
<script type="text/javascript" src="js/portfolio-hover.js"></script> 



<script type="text/javascript" src="js/jQuery.equalHeights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- LOAD HoverAlls --><script type="text/javascript" src="js/jquery.hoveralls.js">            </script>
<!-- LOAD Easing --><script type="text/javascript" src="js/jquery.easing.1.3.min.js">    </script>
<script type="text/javascript">
function setEqualHeight(columns)  
 {  
 var tallestcolumn = 0;  
 columns.each(  
 function()  
 {  
 currentHeight = $(this).height();  
 if(currentHeight > tallestcolumn)  
 {  
 tallestcolumn  = currentHeight;  
 }  
 }  
 );  
 columns.height(tallestcolumn);  
 }  
$(document).ready(function() {  
 setEqualHeight($(".pontent-container > div"));  
`enter code here`});  
</script>

<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
  <script type="text/javascript" src="js/custom.js"></script> 

函数setEqualHeight（列）
{  
var-tallestcolumn=0；
列。每列（
函数（）
{  
currentHeight=$（this）.height（）；
如果（currentHeight>tallestcolumn）
{  
tallestcolumn=当前高度；
}  
}  
);  
柱高度（最高柱）；
}  
$（文档）.ready（函数（）{
设置相等高度（$（“.pontent container>div”）；
`在此处输入代码“}）；

开关

$(".portfolio li").hover(function () {
        $(this).find('div.content').fadeIn("fast");
        },
        function() {
            $(this).find('div.content').fadeOut("fast");
        })  

到

更新将其拉出到函数中

$.fn.showContent = function() {
    var $this = $(this);
    $this.hover(function () {
            $this.find('div.content').fadeIn("fast");
            },
            function() {
                $this.find('div.content').fadeOut("fast");
            })  
}

然后在公文包悬停代码中

$(document).ready(function() {
  $('.portfolio li').showContent();
})

在你的流沙代码中

....


   }
  });
}   

// finally, call quicksand
$applications.quicksand($sortedData, {
  duration: 800,
  easing: 'easeInOutQuad'
    });
$('.portfolio li').showContent();

  });

开关

$(".portfolio li").hover(function () {
        $(this).find('div.content').fadeIn("fast");
        },
        function() {
            $(this).find('div.content').fadeOut("fast");
        })  

到

更新将其拉出到函数中

$.fn.showContent = function() {
    var $this = $(this);
    $this.hover(function () {
            $this.find('div.content').fadeIn("fast");
            },
            function() {
                $this.find('div.content').fadeOut("fast");
            })  
}

然后在公文包悬停代码中

$(document).ready(function() {
  $('.portfolio li').showContent();
})

在你的流沙代码中

....


   }
  });
}   

// finally, call quicksand
$applications.quicksand($sortedData, {
  duration: 800,
  easing: 'easeInOutQuad'
    });
$('.portfolio li').showContent();

  });

---

如前面的回答所述，我无法使用.live（）或.on（）解决悬停错误。我通过在jquery.quicksand.js中注释回调函数来解决这个问题

<!-- Fancybox lightbox -->
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>

<!-- Custom javascript for this template -->
<script type="text/javascript" src="js/portfolio-hover.js"></script> 



<script type="text/javascript" src="js/jQuery.equalHeights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- LOAD HoverAlls --><script type="text/javascript" src="js/jquery.hoveralls.js">            </script>
<!-- LOAD Easing --><script type="text/javascript" src="js/jquery.easing.1.3.min.js">    </script>
<script type="text/javascript">
function setEqualHeight(columns)  
 {  
 var tallestcolumn = 0;  
 columns.each(  
 function()  
 {  
 currentHeight = $(this).height();  
 if(currentHeight > tallestcolumn)  
 {  
 tallestcolumn  = currentHeight;  
 }  
 }  
 );  
 columns.height(tallestcolumn);  
 }  
$(document).ready(function() {  
 setEqualHeight($(".pontent-container > div"));  
`enter code here`});  
</script>

<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
  <script type="text/javascript" src="js/custom.js"></script> 

---

这就做到了，一切都和以前一样，它也通过视网膜图像替换错误解决了，过滤后用于获取标准图像（不再调用retina.js脚本）。

我无法使用.live（）或.on（）解决悬停错误，如前面的回答所述。我通过在jquery.quicksand.js中注释回调函数来解决这个问题

<!-- Fancybox lightbox -->
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>

<!-- Custom javascript for this template -->
<script type="text/javascript" src="js/portfolio-hover.js"></script> 



<script type="text/javascript" src="js/jQuery.equalHeights.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- LOAD HoverAlls --><script type="text/javascript" src="js/jquery.hoveralls.js">            </script>
<!-- LOAD Easing --><script type="text/javascript" src="js/jquery.easing.1.3.min.js">    </script>
<script type="text/javascript">
function setEqualHeight(columns)  
 {  
 var tallestcolumn = 0;  
 columns.each(  
 function()  
 {  
 currentHeight = $(this).height();  
 if(currentHeight > tallestcolumn)  
 {  
 tallestcolumn  = currentHeight;  
 }  
 }  
 );  
 columns.height(tallestcolumn);  
 }  
$(document).ready(function() {  
 setEqualHeight($(".pontent-container > div"));  
`enter code here`});  
</script>

<script type="text/javascript" src="js/jquery.quicksand.js"></script> 
  <script type="text/javascript" src="js/custom.js"></script> 

---

这就成功了，一切都和以前一样，而且在用于获取标准图像的过滤后，视网膜图像替换错误也得到了解决（不再调用retina.js脚本）。

您需要向我们提供更多详细信息，并查看浏览器的错误控制台。目前，您在需要使用它的脚本之后包含了

fancybox.js

，这可能是您的问题。如果您开始查看jquery.quicksand.js源代码的第282行，看起来DOM正在被克隆（事实上，在整个源代码中有几次），然后附加到这个和那个。我在想，这里的绑定在某个时候丢失了。你找到什么了吗？什么都没有。隐马尔可夫模型。。这是一个相当棘手的问题：PYou需要给我们提供更多的细节，以及查看浏览器的错误控制台。目前，您在需要使用它的脚本之后包含了

fancybox.js

，这可能是您的问题。如果您开始查看jquery.quicksand.js源代码的第282行，看起来DOM正在被克隆（事实上，在整个源代码中有几次），然后附加到这个和那个。我在想，这里的绑定在某个时候丢失了。你找到什么了吗？什么都没有。隐马尔可夫模型。。这是一个相当棘手的问题：p这不会有任何区别：

.hover（function（）{}）

只是

.on（'hover'，function（）{}）

的快捷方式。也许你的意思是说（“.portfolio”）.on（“hover”，“li”，function（）{}）我认为“on”将取代不推荐使用的“live”，后者在创建或修改DOM后维护事件绑定。@KyleMacey-阅读文档。您将看到

.on（）

确实替换了

.live（）

和

.delegate（）

和

.bind（）

——但是您得到的行为取决于您传递的参数。我之前评论中的建议相当于

.delegate（）

，但是如果您使用

文档

作为初始选择器，它相当于

.live（）

。这不会有任何区别：

。hover（function（）{}）

只是

on（'hover'，function（）{}）

的快捷方式。也许你的意思是说（“.portfolio”）.on（“hover”，“li”，function（）{}）我认为“on”将取代不推荐使用的“live”，后者在创建或修改DOM后维护事件绑定。@KyleMacey-阅读文档。您将看到

.on（）

确实替换了

.live（）

和

.delegate（）

和

.bind（）

——但是您得到的行为取决于您传递的参数。我前面评论中的建议相当于

.delegate（）

，但如果使用

文档

作为初始选择器，则相当于

.live（）

。