Question

我制作了一个简单的网络应用程序，其中显示了包含AJAX和JSON数据的不同新闻文章。我现在正在添加滑动功能。

但是我遇到了检查某些数据的IF语句问题，然后根据当前数据显示下一组数据。但我的if语句似乎并没有显示正确的内容，即使这些条件是应该的。

我已经包含了代码，我在问题区域留下了评论。

我还在代码下包含了两个链接，其中包含我的JSON文件示例和滑动手势库（如果需要）。

＆＃13;

var newsData;
var eventsData;
var nightData;
var dineData;
var outData;
var videoData;
var data;
var str = 'news';

function getposts(str) {
    var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug=';
    $.ajax({
        type: 'GET'
        , url: baseUrl + str
        , data: {
            get_param: 'value'
        }
        , dataType: 'json'
        , success: function postData(data) {
            if (str == 'news') {
                newsData = data;
                displayPosts(newsData);
            }
            if (str == 'events') {
                eventsData = data;
            }
            if (str == 'nightlife') {
                nightData = data;
            }
            if (str == 'dine') {
                dineData = data;
            }
            if (str == 'outdoors') {
                outData = data;
            }
            if (str == 'videos') {
                videoData = data;
            }
        }
    });
}

getposts('news');
getposts('events');
getposts('nightlife');
getposts('dine');
getposts('outdoors');
getposts('videos');

function displayPosts(str) {
    
    data = str;
    
    if (str == 'news') {
        data = newsData;
    }
    if (str == 'events') {
        data = eventsData;
    }
    if (str == 'nightlife') {
        data = nightData;
    }
    if (str == 'dine') {
        data = dineData;
    }
    if (str == 'outdoors') {
        data = outData;
    }
    if (str == 'videos') {
        data = videoData;
        getCatV();
    }
    
    var maxLength2 = 6;
    
    //IMAGE POST - 1
    var imgTitle1 = data.posts[0].title;
    imgTitle1 = imgTitle1.replace("Newsflash:", "");
    $('.ip1.text-heading').html(imgTitle1);
    var imgThumb1 = data.posts[0].thumbnail_images.full.url;
    $('.ip1.main-card-img1').css("background-image", "url(" + imgThumb1 + ")");
    
    //GET CATEGORY - 1
    function getCat1() {
        var category = data.posts[0].categories[1].title;
        $('.ip1.post-source').html(category + " / ");
        var pTime = data.posts[0].date;
        pTime = pTime.substr(10, maxLength2);
        $('.ip1.post-source').append(pTime);
    }
    
    //TEXT POST - 1
    var title1 = data.posts[1].title;
    title1 = title1.replace("Newsflash:", "");
    $('.p1.text-heading').html(title1);
    var ex1 = data.posts[1].excerpt;
    var maxLength = 100;
    ex1 = ex1.substr(0, maxLength);
    $('.p1.text-post-desc').html(ex1);
    var thumb1 = data.posts[1].thumbnail_images.full.url;
    $('.p1.card-img1').css("background-image", "url(" + thumb1 + ")");
    
    //GET CATEGORY - 2
    function getCat2() {
        var categoryP1 = data.posts[1].categories[1].title;
        $('.p1.post-source').html(categoryP1 + " / ");
        var pTimeP1 = data.posts[1].date;
        pTimeP1 = pTimeP1.substr(10, maxLength2);
        $('.p1.post-source').append(pTimeP1);
    }
    
    //TEXT POST - 2
    var title2 = data.posts[2].title;
    title2 = title2.replace("Newsflash:", "");
    $('.p2.text-heading').html(title2);
    var ex2 = data.posts[2].excerpt;
    ex2 = ex2.substr(0, maxLength);
    $('.p2.text-post-desc').html(ex2);
    var thumb2 = data.posts[2].thumbnail_images.full.url;
    $('.p2.card-img2').css("background-image", "url(" + thumb2 + ")");
    
    //GET CATEGORY - 3
    function getCat3() {
        var categoryP2 = data.posts[2].categories[1].title;
        $('.p2.post-source').html(categoryP2 + " / ");
        var pTimeP2 = data.posts[2].date;
        pTimeP2 = pTimeP2.substr(10, maxLength2);
        $('.p2.post-source').append(pTimeP2);
    }
    
    //TEXT POST - 3
    var title3 = data.posts[3].title;
    title3 = title3.replace("Newsflash:", "");
    $('.p3.text-heading').html(title3);
    var ex3 = data.posts[3].excerpt;
    ex3 = ex3.substr(0, maxLength);
    $('.p3.text-post-desc').html(ex3);
    var thumb3 = data.posts[3].thumbnail_images.full.url;
    $('.p3.card-img3').css("background-image", "url(" + thumb3 + ")");
    
    //GET CATEGORY - 4
    function getCat4() {
        var categoryP3 = data.posts[2].categories[1].title;
        $('.p3.post-source').html(categoryP3 + " / ");
        var pTimeP3 = data.posts[3].date;
        pTimeP3 = pTimeP3.substr(10, maxLength2);
        $('.p3.post-source').append(pTimeP3);
    }
    
    //GET CATEGORY - VIDEO
    function getCatV() {
        var category = data.posts[0].categories[0].title;
        $('.ip1.post-source').html(category + " / ");
        var pTime = data.posts[0].date;
        pTime = pTime.substr(10, maxLength2);
        $('.ip1.post-source').append(pTime);
    }
    
    //POST POPULATE ***
    
    $('#post1').click(function post1(str) {
        $('.post1').css('left', '0px');
        $('.post-header').css('left', '0px');
        $('.post-cont').css('left', '-9999px');
        $('.slider').css('left', '-9999px');
        //Image Post1
        var imgTitle1 = data.posts[0].title;
        imgTitle1 = imgTitle1.replace("Newsflash:", "");
        $('.post1.header').html(imgTitle1);
        var imgThumb1 = data.posts[0].thumbnail_images.full.url;
        $('#para-img').css("background-image", "url(" + imgThumb1 + ")");
        var text1 = data.posts[0].content;
        $('.post1.text').html(text1);
        var category = data.posts[0].categories[1].title;
        $('.lay2.post-source').html(category + " / ");
        var maxLength2 = 6;
        var pTime = data.posts[0].date;
        pTime = pTime.substr(10, maxLength2);
        $('.lay2.post-source').append(pTime);
        //GET TAGS
        //        function getTags(){
        //            for (var i = 0; i < data.posts.length; i++) {
        //            var newTag = "<li>" + "<input type='checkbox' value=' ' class='tag'>" + "<label for='tag'                 class='post inter-label" + "'>" + data.posts[0].tags[i].title + "</label>" + "</li>";
        //            $('.tag-list').append(newTag);
        //        }}
        //        getTags();
    });
    
    $('#post2').click(function post1(str) {
        $('.post1').css('left', '0px');
        $('.post-header').css('left', '0px');
        $('.post-cont').css('left', '-9999px');
        $('.slider').css('left', '-9999px');
        //Image Post1
        var imgTitle1 = data.posts[1].title;
        imgTitle1 = imgTitle1.replace("Newsflash:", "");
        $('.post1.header').html(imgTitle1);
        var imgThumb1 = data.posts[1].thumbnail_images.full.url;
        $('#para-img').css("background-image", "url(" + imgThumb1 + ")");
        var text1 = data.posts[1].content;
        $('.post1.text').html(text1);
        var category = data.posts[1].categories[1].title;
        $('.lay2.post-source').html(category + " / ");
        var maxLength2 = 6;
        var pTime = data.posts[1].date;
        pTime = pTime.substr(10, maxLength2);
        $('.lay2.post-source').append(pTime);
    });
    
    $('#post3').click(function post1(str) {
        $('.post1').css('left', '0px');
        $('.post-header').css('left', '0px');
        $('.post-cont').css('left', '-9999px');
        $('.slider').css('left', '-9999px');
        //Image Post1
        var imgTitle1 = data.posts[2].title;
        imgTitle1 = imgTitle1.replace("Newsflash:", "");
        $('.post1.header').html(imgTitle1);
        var imgThumb1 = data.posts[2].thumbnail_images.full.url;
        $('#para-img').css("background-image", "url(" + imgThumb1 + ")");
        var text1 = data.posts[2].content;
        $('.post1.text').html(text1);
        var category = data.posts[2].categories[1].title;
        $('.lay2.post-source').html(category + " / ");
        var maxLength2 = 6;
        var pTime = data.posts[2].date;
        pTime = pTime.substr(10, maxLength2);
        $('.lay2.post-source').append(pTime);
    });
    
    $('#post4').click(function post1(str) {
        $('.post1').css('left', '0px');
        $('.post-header').css('left', '0px');
        $('.post-cont').css('left', '-9999px');
        $('.slider').css('left', '-9999px');
        //Image Post1
        var imgTitle1 = data.posts[3].title;
        imgTitle1 = imgTitle1.replace("Newsflash:", "");
        $('.post1.header').html(imgTitle1);
        var imgThumb1 = data.posts[3].thumbnail_images.full.url;
        $('#para-img').css("background-image", "url(" + imgThumb1 + ")");
        var text1 = data.posts[3].content;
        $('.post1.text').html(text1);
        var category = data.posts[3].categories[1].title;
        $('.lay2.post-source').html(category + " / ");
        var maxLength2 = 6;
        var pTime = data.posts[3].date;
        pTime = pTime.substr(10, maxLength2);
        $('.lay2.post-source').append(pTime);
    });
    getCat1();
    getCat2();
    getCat3();
    getCat4();
    
$('#swipe').bind('swiperight', function(){

});
// **** PROBLEM AREA ****
$('#swipe').bind('swipeleft', function(){
if(data == newsData){
    displayPosts('events');
}
else if(data == eventsData){
    displayPosts('nightlife');
}
else if(data == nightData){
    displayPosts('dine');
}
console.log(data);
});
    
} //End of displayPosts

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="slider interest-slider">
                    <div data-index="news">
                        <p onclick="displayPosts('news')">Home</p>
                    </div>
                    <div>
                        <p onclick="displayPosts('events')">Events</p>
                    </div>
                    <div>
                        <p onclick="displayPosts('nightlife')">Nightlife</p>
                    </div>
                    <div>
                        <p onclick="displayPosts('dine')">Dine</p>
                    </div>
                    <div>
                        <p onclick="displayPosts('outdoors')">Outdoors</p>
                    </div>
                    <div>
                        <p onclick="displayPosts('videos')">Video</p>
                    </div>
</div>

＆＃13;

Swipe function library - JGestures

Example of Json Data file

Answer 1

你的＆＃34; displayPosts＆＃34;功能看起来不对。你只能通过＆＃34;新闻＆＃34;如果一个开始的语句，而且你只传入一个参数，数据。您要为该模式检查此参数。看起来你应该传入这个类型。

话说回来，我完全停止使用全局变量，并将模式和数据作为两个参数传递。

Answer 2

试试这个;）

在将变量与多个值进行比较时，您应该使用switch / if...else构造，因为这样您可以跳过进一步检查是否找到匹配项。

使用开关：

success: function postData(data){
    switch(str){
      case 'news':
        newsData = data;
        displayPosts(newsData);
        break;
      case 'events':
        eventsData = data;
        break;
      case 'nightlife':
        nightData = data;
        break;
      case 'dine':
        dineData = data;
        break;
      case 'outdoors':
        outData = data;
        break;
      case 'videos':
        videoData = data;
        break;
    }
  }

<强>更新

switch(str){
  case 'news':
    data = newsData;
    break;
  case 'events':
    data = eventsData;
    break;
  case 'nightlife':
    data = nightData;
    break;
  case 'dine':
    data = dineData;
    break;
  case 'outdoors':
    data = outData;
    break;
  case 'videos':
    data = videoData;
    getCatV();
    break;
}

创建多个if语句以显示不同的Json数据

2 个答案: