0

我正在制作一个使用 Javascript 排序器的网站。除了排序器，我还添加了一些自定义的 javascript，以使某些 div 可点击。我的理由是使用该属性无法完成我们希望它做的所有事情，所以我坚持使用 div，并使用 javascript 来使它们发挥作用。

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

您可以向下滚动到您看到搜索栏的位置，然后单击其中一间公寓。当您返回单击（1 间卧室）时，您会发现单击公寓不再起作用。

我完全不知道该怎么做。可点击性的 javascript 位于页面底部。

您对此有何看法？

这是我的javascript

    <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

非常感谢您的想法

4

3 回答 3

1

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

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

还有2件事。

1.) 添加“光标：指针；” 到您的可点击框的CSS（可用性）

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

$(".apt2").click(function(){
  $(this).find("a").trigger('click');
  return false;
});
于 2012-12-10T09:56:26.913 回答
1

当我在您的网站上使用内置调试器的 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>

在之前的点击功能之后。

于 2012-12-10T10:04:33.417 回答
0

因此，您可以尝试编辑我们的文件 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;
    });
});

Additinaly，我认为这段代码对你的 html 内容没用。

  <!--Begin Sorter-->
    <script type='text/javascript'>
    $(document).ready(function() {
          $('#source').quicksand( $('#destination li') );
     });
  </script>
于 2012-12-11T10:18:13.987 回答