Question

我对jquery比较新，但我需要该脚本才能开始正常工作。

我有一个jquery脚本，用于从url读取JSON数据。它是单独工作但当我尝试在光滑的轮播中加载数据时，轮播停止工作。我认为问题出在我的脚本中。请帮忙！

我的代码：

(function($){ 
$.fn.scores = function() {
    liveScores();
};

function liveScores() {
    setTimeout(liveScores, 5000);

    var jsonData = "http://url";

    $.getJSON(jsonData, function(rawJsonData){

        var complete =[];

        //var realcatCount = rawJsonData.doc[0].data[0].realcategories.length;

        for (realCat = 0; realCat <= 3; realCat ++) {

            console.log(realCat);

            var basePath = rawJsonData.doc[0].data[0].realcategories[realCat]

            var tournament = basePath.tournaments[0].name;
            var name = basePath.name;
            var matchStatus = basePath.tournaments[0].matches[0].status._id;
            var homeTeam = basePath.tournaments[0].matches[0].teams.home.name;
            var awayTeam = basePath.tournaments[0].matches[0].teams.away.name;
            var time = basePath.tournaments[0].matches[0]._dt.time;
            var date = basePath.tournaments[0].matches[0]._dt.date;
            var homeScore = basePath.tournaments[0].matches[0].result.home;
            var awayScore = basePath.tournaments[0].matches[0].result.away;
            var teamIdHome = basePath.tournaments[0].matches[0].teams.home.uid;
            var teamIdHAway = basePath.tournaments[0].matches[0].teams.away.uid;


            complete.push('<div class="slide-wrapper"><h2>'+tournament+'</h2><h4>'+name+'</h4><div class="score">'+homeScore+ ' vs. '+awayScore+'</div><div class="team home-team"><div class="crest crest-home" style="background:url(http://ls.betradar.com/ls/crest/big/'+teamIdHome+'.png) no-repeat center center;"></div><h3>'+homeTeam+'</h3></div><div class="team away-team"><div class="crest crest-away" style="background:url(http://ls.betradar.com/ls/crest/big/'+teamIdHAway+'.png) no-repeat center center;"></div><h3>'+awayTeam+'</h3></div><div class="overlay"></div><img class="bcg" src="images/bg-live.jpg"></div>');

        }

        console.log(complete);

        $('#results').empty().append(complete);

    });
};

}）（jQuery的）;

这是我在页面底部加载脚本和插件的顺序。

    <script type="text/javascript" src="js/scores.js"></script>
    <script>        
        $(document).ready(function() {
            $().scores();
         });
    </script>

    <script type="text/javascript" src="js/slick.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').slick({
                dots: true,
                arrows: false,
                infinite: true,
                speed: 300,
                slidesToShow: 1,
                adaptiveHeight: true,
                fade: true,
                cssEase: 'linear'
            });
        });
    </script>

首先我加载轮播项目（JSON数据），然后加载光滑的轮播本身。

光滑的旋转木马工作正常，直到我将插件中的数据放入其中。

Answer 1

提供的代码不是很好，

例如，你不知道是否有3个真实的（0,1,2）
不要将json用作变量名，json是符号，不是一个好的变量名

$。getJSON（jsonData，function（rawJsonData）{ var complete = []; var realcatCount = rawJsonData.doc [0] .data [0] .realcategories.length;
```
        for (realCat = 0; realCat <= (realcatCount  -1); realcatCount ++) {
            console.log(realCat);
            var basePath = json.doc[0].data[0].realcategories[realCat]
```
...

其余代码似乎没问题，但不是很好。尝试尽可能少地走json路径。这将是： var match = basePath.tournaments [0] .matches [0]; var matchStatus = match .status._id; var homeTeam = match .teams.home.name;

您需要做的是确保您的html在绑定之前就在那里。所以首先生成转盘项，然后执行.slick（）函数

这样你会得到： //你的现有代码.. $（＆＃39;＃结果＆＃39）。空（）追加（完全）;

//然后点击它..从你的html中的单独代码块中删除此代码并将其移动到此处..

    $('.slider').slick({
        dots: true,
        arrows: false,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true,
        fade: true,
        cssEase: 'linear'
    });

你的问题是.slick在html存在之前被调用（它来自网址）

首先创建html，然后追加
然后做.slick

生成的（工作）代码： https://jsfiddle.net/aeuuymuy/12/

Jquery JSON插件与光滑的轮播相撞

1 个答案: