0

水平方向にスクロールすると、APIからajaxとjsonを介してデータを読み込むスクロールdivがあります。

私は現在それを機能させていますが、私が抱えている問題は、1つのページに複数のスクロールdivがあることです。スクロールされているdivのIDをjqueryに通知して、ajaxが別のAPI呼び出しを使用して、その特定のdivに正しいデータをロードできるようにする必要があります。

これが私のコードのHTMLです： 

<div id="ip-technology" class="scroll-box">
<h2>Latest Videogames Titles</h2>
    <a class="view" href="technology.html">See all</a>
    <ul class="scroll-horizontal mCustomScrollbar _mCS_3">
    <div class="mCustomScrollBox mCSB_horizontal" id="mCSB_3" style="position:relative; height:100%; overflow:hidden; max-width:100%;"><div class="mCSB_container" style="position: relative; left: 0px; width: 6721px; ">  
    <li class="product-Magazine">
        <a href="#">
            <span class="store-badge"></span>
        <img src="cover.jpg" width="124" height="166">
    </li>
           </div>

    <div class="mCSB_scrollTools" style="position: absolute; display: block; ">
    <div class="mCSB_draggerContainer" style="position:relative;">
    <div class="mCSB_dragger ui-draggable" style="position: absolute; width: 149px; ">
    <div class="mCSB_dragger_bar" style="position:relative;">
    </div></div><div class="mCSB_draggerRail"></div>
    </div></div></div>
</ul>

そしてここにjquery/ajaxがあります...

 $(".scroll-horizontal").mCustomScrollbar({
        horizontalScroll:true,
        scrollEasing:"easeOutBack",
        advanced:{
            autoExpandHorizontalScroll: true
        },
        callbacks:{
            onTotalScrollOffset: 30,
            onTotalScroll: function(){                  

             var url = 'http://www.URL-TO-API.com' //Needs to somehow pass in the div id

              $.ajax({
                    type: 'GET',
                    url: url,
                    async: true,
                    jsonpCallback: 'callback',
                    dataType: 'jsonp',
                    success: function(data)
                    {

                         $.each(data.products, function(key, val)
                         {
                                if (loadNumber <= 4) {
                                     $('li.loading').before('<li class="product-ebook"><a href="product.html"><span class="store-badge"></span><img src="'+val.image+'" width="124" height="166" /><h3>'+val.title+'</h3></a></li>');
                                };
                                if (loadNumber >= 4) {
                                     $('li.loading').hide();
                                };
                         });

                          $('h3').html(function(index, currentHtml) {
                              return currentHtml.replace('Issue', '<span>Issue')
                                                .replace('Vol', '<span>Vol');
                              $(this).apppend("</span>");
                          });
                          $('.scroll-horizontal').mCustomScrollbar("update");


                    },
                    error: function() {
                        console.log('failed');
                    }
                    });
            }
        }
    });
4

2 に答える 2

1

あなたが使用することができます

this

これにより、スクロールされている特定のdivが得られます

その後、あなたは使用することができます

$(this).find('.mCSB_horizontal')attr('id');

そのdivのIDを取得するには

于 2012-10-08T09:58:43.500 に答える
1

「.scroll-horizo​​ntal」クラスは、コードブロック内のULアイテム$（this）.attr（'id'）に適用されますが、UL要素のIDを参照しますが、私が信じているdivのIDが必要です。

試す $(this).find('.mCSB_horizontal').attr('id');

これにより、ULはmCSB_horizo​​ntalでdivを検索し、そのIDを取得します。

編集：「this」の使用とそのスコープを調べます。

私はあなたが使用しているスクロールプラグインに精通していませんが、ロード時に各要素に順番に適用してみてください：

$(document).ready(function(){
    $(document).find('.scroll-horizontal').each(function(){
        //for each UL now find its scrolling div
        var the_div_id = $(this).find('.mCSB_horizontal').attr('id');
        //test, should spit all ids out on load
        console.log(the_div_id);

        $(this).mCustomScrollbar({
            //your code
            callbacks:{
                //your code

                //the_div_id should be valid in this scope
                //pass it via ajax property - data:the_div_id,
                //or append it to your url depending on your api
                var url = 'http://www.URL-TO-API.com' //Needs to somehow pass in the div id

            }
        });
    });
});
于 2012-10-08T10:28:36.160 に答える