複数のif文を作成して異なるJsonデータを表示する

シンプルなWebアプリケーションを作成して、AJAXおよびJSONデータを含むさまざまなニュース記事を表示しました。今私はスワイプ機能を追加しています。複数のif文を作成して異なるJsonデータを表示する

しかし、私は特定のデータをチェックするために行ったIF文に問題があり、現在のデータに従って次のデータセットを表示しています。しかし、私のif文は条件がどうあるべきかという条件であっても正しいコンテンツを表示しているようには見えません。

私はコードを含めましたが、私は問題の領域からコメントを残しました。

コードの下に2つのリンクがあり、JSONファイルの例とスワイプジェスチャーライブラリが必要な場合に備えています。

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

<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>

Swipe function library - JGestures

Example of Json Data file

出典

2017-03-10 Anonymous

あなたは '使うべきではなく、'条件if'のswitch'。 – itzmukeshy7

あなたの "displayPosts" 機能が正しく表示されません。開始のための "news" ifステートメントからの呼び出しだけでなく、1つのパラメータ、つまりデータだけを渡しています。あなたはモードのこのパラメータをチェックしています。代わりに型を渡す必要があるようです。

これを言ってから、グローバル変数の使用を完全にやめ、モードとデータの両方を2つのパラメータとして渡します。

出典

2017-03-10 06:53:03

お返事ありがとうございます。私はそれを見てあなたに知らせるでしょう:) –

あなたのスワイプの面では、データ自体ではなくタイプ/モードをもう一度チェックします。 –

申し訳ありませんが、私は初心者です。あなたがタイプ/モードと言ったら何を指していますか？私の無知を許しなさい。 –

はこれを試してみてください;）

あなたが複数の値を持つ変数を比較するとき、一致が見つかった場合は、さらにスキップすることができ、このように確認してくださいので、あなたは、このような場合に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; 
    } 
    }

UPDATE

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; 
}

出典

2017-03-10 07:18:10 itzmukeshy7

返信いただきありがとうございます！それはより良い選択肢のように思えます。しかし、私はあなたがpostData関数/ Ajaxの成功関数でそれを使用しているのを見ています。しかし、私はコメントで強調表示されているスワイプ機能のためにそれが必要です。私は同じスイッチ方法を使用する必要がありますが、スワイプ機能に入れるだけですか？ –

はい 'displayPosts' if条件のために' switch'を使うべきです。 – itzmukeshy7

複数のif文を作成して異なるJsonデータを表示する

答えて

関連する問題