JSON配列がリンク上で正しいコンテンツを表示しない

JSONデータをAjax & Jqueryで取り込んでいます。私は、データをロードしていると、次のようにオブジェクトがある -JSON配列がリンク上で正しいコンテンツを表示しない

ID, 
TITLE, 
PERMALINK, 
CONTENT, 
ETC.(The rest is not important)

私は別にあなたがクリックしたリンクに基づいて、各コンテンツオブジェクトを表示しようとしています。したがって、リンクに特定のIDがある場合は、THAT配列のCONTENTオブジェクトが表示されます。

しかし、私が得意なのは、クリックするたびに同じ内容のオブジェクトが何であっても表示されることです。

私は確かに傾けないので、あなたが見るためにコードスニペットを添付し、うまくいけば、あなたが問題を見ることができます。

私は本当に助けに感謝します。それ以外の場合は、私の髪を裂くかもしれません。

$.ajax({ 
    type: 'GET', 
    url: 'data.json', 
    data: { 
     get_param: 'value' 
    }, 
    dataType: 'json', 
    success: function (data) { 
     $.each(data, function (i, element) { 
      var link = $('.more-link'); 
      var cont = "<div class='content'>" + data[i].content + "</div>"; 
      var back = "<a class='back' href='http://localhost:8888/postPopulate/Feb21.8.23AM'>BACK</a>"; 
      var thumb = "<img class='thumb' src=" + data[i].thumbnail + ">"; 
      var title = "<h1 class='title'>" + data[i].title + "</h1>"; 
      var exc = "<p class='excerpt'>" + data[i].excerpt + "</p>"; 
      var perma = JSON.stringify(data[i].permalink); 

      perma = perma.replace("http://www.capetownetc.com/blog/", ""); 
      perma = perma.replace("http://www.capetownetc.com/events/", ""); 
      perma = perma.replace("http://www.capetownetc.com/mykitchen/", ""); 
      $(link).attr("href", "http://localhost:8888/postPopulate/Feb21.8.23AM/#" + perma); 
      console.log(perma); 

      $(link).click(function() { 
       $('body').html(cont); 
       $('body').append(back); 
      }); 

      $('body').append(title); 
      $('body').append(thumb); 
      $('body').append(exc); 
     }); //END OF FOR LOOP 
    } //END OF SUCCESS FUNC 
}); //END OF AJAX

JSON例

[{ 
    "id": 58543, 
    "title": "[email protected] brings contemporary art to the wine estate", 
    "permalink": "http:\/\/www.capetownetc.com\/blog\/artalmenkerk-brings-contemporary-art-wine-estate\/", 
    "content": "With its spectacular views and award-winning wine, a trip to Almenkerk Wine Estate in Elgin is well worth it...", 
    "excerpt": "With its spectacular views and award-winning wine, a trip to Almenkerk Wine Estate in Elgin is well worth it...", 
    "date": "2017-02-20 10:00:34", 
    "author": "Annzra Denita", 
    "thumbnail": "http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenekerk-FI.jpg 650w, http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenekerk-FI-600x400.jpg 600w", 
    "categories": ["blog", "CULTURE"], 
    "tags": ["art", "arts", "cape town etc", "capetown etc", "CapeTownEtc", "culture", "elgin", "getaways", "sculpture", "wine"] 
    }, 
    //... 
]

UPDATE -

<!DOCTYPE html> 
 
<html> 
 
    
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rugby Thumbnails</title> 
 
    <link href="css/styles.css" rel="stylesheet"> 
 
    <script src="js/jquery.min.js"></script> 
 
    <script src="js/main2.js"></script> 
 
</head> 
 
    
 
<body> 
 

 
    
 
</body> 
 
</html>

私はリンクをクリックすると、それだけでcontent1

を表示0

出典

2017-02-21 Anonymous

私はCSSコードはHTMLコードの 'script'タグでも' head'セクションにあってはいけないと思います（ ''の外でさえ） – niceman

はい、あります過去を見てください。それは外にあるようではありません。私はあなたが言っていることを理解していますが、スクリプトはHTMLの要素を必要としないので、問題には関係ありません。しかし、返信をありがとう。 –

サーバーが期待したjson応答を返すことを確認しましたか？あなたはブラウザのデベロッパーツールを使って見ることができます） – niceman

あなたのリンクをクリック

$(link).click(function() { 
       $('body').html(cont); 
       $('body').append(back); 
      });

は、クリックイベントの複数の時間を結合各ループでそれを与えるように、外アヤックス成功機能のある必要があります。違います。 "more-link"クリックで親参照を与え、その兄弟 ".content"をhtmlとして配置し、兄弟 ".back"を見つけてhtmlに追加する必要があります。

あなたのコードのリンクをクリックして、問題はあなたがDOMに動的に要素を追加するなどのクリックイベントのために発生した場合、この

$("body").on("click",".more-link",function() { 
var content = $(this).siblings(".content"); 
var back = $(this).siblings(".back"); 
        $('body').html(content); // it may be differ based on your html structure 
        $('body').append(back); 
       });

あなたは、動的に生成された要素にクリックイベントを与えるために検索することができますようにのようになります。

出典

2017-02-21 18:00:42

返信いただきありがとうございます！私はHTMLを挿入しましたが、最初に追加しなかった理由はわかりません。しかし、私がajax呼び出しからclick関数を取った場合、ajax呼び出しがグローバルではないため、Dataとiの両方は未定義です。私はこれを修正する方法がわかりません。 –

$（各）コードを削除する必要はありません。 $（リンク）.click（function（））をajax呼び出しの外側に置いて、直接ドキュメントに入れるだけです。私が答えて示唆したように、ready（）とそれを修正してください。 –

JSON配列がリンク上で正しいコンテンツを表示しない

答えて

関連する問題