0

我有一个滚动 div，当您水平滚动时，它会通过 API 的 ajax 和 json 加载数据。

我目前可以使用它，但我遇到的问题是我在一个页面上有多个滚动 div。我需要让 jquery 知道正在滚动的 div 的 ID，以便 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

“.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 回答
1

您可以使用

this

这将为您提供正在滚动的特定 div

之后你可以使用

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

获取该 div 的 id

于 2012-10-08T09:58:43.500 回答