Question

我正在建立一个使用Javascript分拣机的网站。除了分拣机，我还添加了一些自定义的javascript，以使某些div可点击。我的理由是使用该属性并不能完成我们想要它做的所有事情，所以我坚持使用div，并使用javascript使它们起作用。

看看这里 - http://www.opohills.com/taipei-rentals.php

您可以向下滚动到您看到搜索栏的位置，然后点击其中一个公寓。当您返回点击（1间卧室）时，您会看到点击公寓不再有效。

我不太清楚该怎么做。可点击性的javascript位于页面底部。

您对此有何看法？

这是我的javasscript

    <script type='text/javascript'>
    $(".box_1").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    });
     $(".box_2").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    });
         $(".box_3").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    }); 
    $(".apt2").click(function(){
         window.location=$(this).find("a").attr("href"); 
         return false;
    });   
  </script>

思想？

更新

根据建议，我已经通过移动javascript以便在jquery.quicksand之上点击来更新代码，并且只在文档准备好后启动它。

即使有了这些变化，我仍然无法让它发挥作用。

这里可以看到最新版本的网站---

http://www.opohills.com/taipei-rentals.php

您的想法非常感谢

Answer 1

该脚本基本上适合我（并且适合您）。你的问题可能是有时你的dom还没有准备好：

$(document).ready(function() {
  // your code here
});

另外2件事。

1。）添加“cursor：pointer;”对于可点击框（可用性）的css

2。）只需触发点击您的链接：

$(".apt2").click(function(){
  $(this).find("a").trigger('click');
  return false;
});

Answer 2

当我在你的网站上使用内置deborger的chorme时，如果我在你的“li”标签上创建ID等自定义字段，则会在过滤后删除它们。我认为流沙正在页面加载期间创建缓存。您只在初始化流沙图库后才创建.click（）事件，并且由于流沙会替换您的li标签，因此可能会删除这些点击事件。

尝试初始化您的点击

$(function() {
  $("#ourHolder li").click(function() { window.location.href=$(this).find('a').attr('href')});
});

您应该在ul标记中添加id =“ourHolder”以优化脚本速度。

只有在初始化之后才开始你的流沙对象初始化。移动你的

<script src="js/jquery.quicksand.js"></script>
<script src="js/sorter-settings.js"></script>

之前的点击功能。

Answer 3

因此，您可以尝试编辑我们的文件sorter-settings.js并替换此代码（基于此处提供的文档（http://razorjack.net/quicksand/docs-and-demos.html）：

  $(document).ready(function() {



  // get the action filter option item on page load
  var $filterType = $('#filterOptions li.active a').attr('class');

  // get and assign the ourHolder element to the
    // $holder varible for use later
  var $holder = $('ul#ourHolder');

  // clone all items within the pre-assigned $holder element
  var $data = $holder.clone();

  // attempt to call Quicksand when a filter option
    // item is clicked
    $('#filterOptions li a').click(function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');

        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
        } 
        else {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var $filteredData = $data.find('li[data-type=' + $filterType + ']');
        }

        // call quicksand and assign transition parameters
        $holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad',
                    enhancement: function() {
                        $("#ourHolder li").click(function() { window.location.href=$(this).find('a').attr('href')});
                        }
        }
            );
        return false;
    });
});

另外，我认为这段代码对你的html内容毫无用处。

  <!--Begin Sorter-->
    <script type='text/javascript'>
    $(document).ready(function() {
          $('#source').quicksand( $('#destination li') );
     });
  </script>

另一个脚本启动后Javascript失败

3 个答案: