0

Javascript ソーターを使用する Web サイトを作成しています。ソーターに加えて、特定の div をクリック可能にするために、いくつかのカスタム JavaScript も入れました。私の理由は、プロパティを使用してもやりたいことをすべて実行できないということでした。そのため、div を使用し、javascript を使用してそれらを機能させました。

こちらをご覧ください -- http://www.opohills.com/taipei-rentals.php

検索バーが表示される場所まで下にスクロールし、アパートの 1 つをクリックします。クリックして戻ると (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

Webサイトで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 に答える
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 に答える
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;
    });
});

さらに、このコードは html コンテンツでは役に立たないと思います。

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