3

新規/更新された質問をご覧ください

https://stackoverflow.com/questions/7423874/jquery-navigation-and-jscrollpane-work-at-first-but-not-after-click

次に、カスタムスクロールバーを追加しようとしています。デモをご覧ください：

デモ

今のところ、まったく表示できません。私のローカルソースには、jquery.ui、jquery、jquery.easing.1.3.js、jquery.mCustomScrollbar.css、jquery.mCustomScrollbar.js、jquery.mousewheel.min.jsが含まれます。

私はそれが関係していると信じています：

$('.grid').fadeOut(0);

新しいメニュー項目がクリックされるたびに、jqueryのどこかにこの行を含める必要があります。

$("#mcs_container").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15);

また、Chromeブラウザで次のエラーが発生します。

247Uncaught TypeError：nullのプロパティ'top'を読み取れません$.fn.mCustomScrollbar.btnsScrollTimerjquery.mCustomScrollbar.js：247 jQuery.event.handlejquery-latest.js：3001 b

ありがとう！

4

2 に答える 2

3

デモ

array.sort()簡素化されたマークアップを使用すると、非常に簡単です ( jquery セレクターの戻り値セットでメソッドを使用することが、Web サイトで表形式のデータを再配置する最も簡単な方法であるとは言えません)。ここでは単純に のリストを取得し、<ul>それらの最初の に基づくカスタム ソート関数でソートします<li>。

var nodeList = $(".grid ul").sort(function(a,b){
    return ($(a).find("li:first").text() > $(b).find("li:first").text());
});

$(".grid ul, .grid:gt(0)").remove();

$(".grid").append(nodeList);

これ以上簡単なことはありません:)

于 2011-08-31T00:29:47.217 に答える
2

ワーキングデモ

編集：
完全に機能するデモ：

デモ

Huuuh :)完了しました！
ULをアルファベット順にソートする方法についてWeb全体を検索しています。しかし、結果はありません。

使い方：

  • 既存のすべての映画をFIRSTに複製しました（アクションリンクを押した後、正しいものを取得するために、以前のようにこれ以上魔法.slideを使用する必要はありません）index -1.slide
  • 関数'sorty'を作成しました:)
  • すべてのli映画名.data()を各親要素のjQueryに取得しましたul
  • 現在、グリッドulは映画の名前を保持しています。
  • ul最初にすべてアルファベット順にソート.slide
  • できます！

if'all'リンクのチェック を削除したのではなく、jQueryからCSSにコードを移動したことがわかります（//追加！でマークされています） 。'info' jQueryを保持するプロパティを
HTMLに追加すると、このスライドに複製された要素が入力されます。 そして、jQueryセレクターを使用して、定義された要素を除くすべての要素を取得しました （つまり、インデックス「0」よりも大きいすべての要素を使用すると、赤いテキストが表示されます。最初の要素だけがデフォルトの色になります）。 .slide


:gt()
$('.element:gt(0)').css({color:'red'});

ご不明な点がございましたら、お気軽にお問い合わせください。

数行で次のようになります。

$('.grid:gt(0)').find('ul:eq(0)').fadeOut(0);    // hide titles (not from the first .grid (:eq(0)))   
$('.grid:gt(0) ul:visible:not(:eq(0))').clone().appendTo( $('.grid:eq(0)') ); // after we hided all the titles - clone all UL elements to our first .slide

$('.slide:gt(0)').hide();

function sorty() {    // sort UL elements by holding data (the data will be the movie name! )
    $('.grid:eq(0) ul:gt(0)').each(function() {
        var txt1 = $(this).children('li:eq(0)').text();
        $(this).data('name', txt1);
    });
    var items = $('.grid:eq(0) ul');
    items.sort(function(a, b) {
        var charA = $(a).data('name');
        var charB = $(b).data('name');
        if (charA < charB) return -1;
        if (charA > charB) return 1;
        return 0;
    });
    var grid = $('.grid:eq(0)');
    $(grid).append(items);
    $('.grid:gt(0)').find('ul:eq(0)').show(); // redo visibility for infos.
}
sorty(); // run sorty!

$('ul.nav li').click(function() {
    $(this).addClass('btnSelect').siblings().removeClass('btnSelect');
    var i = $(this).index();
    $('.slide:visible').fadeOut(400, function() {
        $('.slide:eq(' + i + ')').fadeIn(400);
    });
});
于 2011-08-31T00:14:22.777 に答える