4

特定のjsonデータを箇条書きの形式で表示しようとしています。各章のデータをに<li>、各タイトルをに<p>、それらのタイトルをとして作成しlinkます。最後に、クリックされたタイトル表示に関連するコンテンツのインデックスを 1秒で検討します<div>。私はすでに以下のコードをいくつか持っています（まだ機能していません）。

HTML：

<div id="page1">
    <ul id="courses"></ul>
</div>
<div id="page2">
    <p id="content"></p>
</div>

JSコード：

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},
{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},
{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},
{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},
{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var $clist = $('#courses');
    for(var i in myData) {
        $('<li><h3>' +this.[i].chapter+ '</h3><p><a href="#page2" onclick="dContent(i)">' +this.title+ '</a></p></li>').appendTo($clist);
    }

    function dContent() {
        var $ccontent = $('#content');
        $(this.[i].content).appendTo($ccontent);
    }
});

期待される結果：

- General
    News forum          // onclick display 'Text1' in <p id="content">
- CHAPTER 1
    1.1 Introduction    // onclick display 'Text2' in <p id="content">
    1.2 Main Idea       // onclick display 'Text3' in <p id="content">
- CHAPTER 2
    2.1 Architecture    // onclick display 'Text4' in <p id="content">
- CHAPTER 3
    3.1 Liter.overview  // onclick display 'Text5' in <p id="content">

どんな助けでもいただければ幸いです。

更新：これがJSFIDDLEプロジェクトです。

4

5 に答える 5

2 
var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';
var myData = JSON.parse(jsonString);

var dContent = function(event) {
    $ccontent.html($(this).data('content'));
}

var $clist = $('#courses');
var $ccontent = $("#content");
var html = '';
var chapterList = [];

$clist.on('click', 'li', dContent);

$.each(myData, function(index, item) {
    if ($.inArray(item.chapter, chapterList) === -1) {
        chapterList.push(item.chapter);
        html += '<li data-content="'+ item.content +'"><h3>' + item.chapter + '</h3><p><a href="#page2">' + item.title + '</a></p></li>';
    }
    else {
        html += '<li data-content="'+ item.content +'"><p><a href="#page2">' + item.title + '</a></p></li>'
    }
});
$clist.html(html);
于 2013-02-21T20:20:59.013 に答える
1

同じ章のアイテムをまとめるなど、これを行うためのスクリプトを作成しました。ここでデモフィドルを見ることができます。

との互換性を確保するため$(a).on('click', ..にjQueryを除いて、ほとんどの場合ネイティブJavaScriptを使用しました。$(document).readyなんでこんなに長いの？<ul>HTML文字列の代わりにDOMメソッドを使用してビルドしたためです。これにより、要素のキャッシュと追加が簡単になりました。最後に、コンテンツはジェネレーター関数を介して追加されます。私のやり方では、ページは少し多くのメモリを使用しますが、JavaScriptで有効な任意の文字列をコンテンツセクションに表示できます。whitespace: pre-wrap;期待どおりに新しい行を表示するために、スタイルを設定することをお勧めします。

とにかく、ここにコードがあります

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},\
{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},\
{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},\
{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},\
{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';
// the \ at line ends is to escape the new line in the string literal

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var courses_ul = document.getElementById('courses'), // cache elements
        content_elm = document.getElementById('content'),
        i, li, h3, p, a, // vars for loop
        chapters = {}, chap; // cache chapters
    for (i = 0; i < myData.length; ++i) {
        chap = myData[i].chapter; // shorthand since we'll use it a few times
        // make <p>, <a>
        p = document.createElement('p');
        a = document.createElement('a'); // could append <a> to <p> here if you want
        a.setAttribute('href', '#page2');
        a.appendChild(document.createTextNode(myData[i].title));
        // set up click
        $(a).on('click', (function (content) { // generator - will give scope to
            return function () { // this returned event listener.
                content_elm.innerHTML = '';
                content_elm.appendChild(document.createTextNode(content));
            };
        }(myData[i].content))); // chose `content` not `i` so no reliance on `myData`
        // now check cache if chapter exists -
        if (chap in chapters) { // retreive <li> for chapter from cache
            li = chapters[chap]; // from cache
            // append <p>, <a>
            li.appendChild(p).appendChild(a);
        } else { // if not in cache
            li = document.createElement('li'); // make a new <li>
            chapters[chap] = li; // and cache
            // make & append <h3>
            h3 = document.createElement('h3');
            h3.appendChild(document.createTextNode(chap));
            li.appendChild(h3);
            // append <p>, <a> and to <ul>
            courses_ul.appendChild(li).appendChild(p).appendChild(a);
        }
    }
});
于 2013-02-22T12:24:42.303 に答える
1

無効なJSON構造があります。正しい構造は次のとおりです。

[
    {
        "chapter": "General",
        "title": "News forum",
        "content": "Text1"
    },
    {
        "chapter": "CHAPTER 1",
        "title": "1.1 Introduction",
        "content": "Text2"
    },
    {
        "chapter": "CHAPTER 1",
        "title": "1.2 Main Idea",
        "content": "Text3"
    },
    {
        "chapter": "CHAPTER 2",
        "title": "2.1 Architecture",
        "content": "Text4"
    },
    {
        "chapter": "CHAPTER 3",
        "title": "3.1 Liter.overview",
        "content": "Text5"
    }
]

ここ3.1 Liter.overview","content":"Text5"},でJSON構造のコンマに注意してください。ここでは失敗します

コードで更新された回答

var jsonString = '[{"chapter": "General","title": "News forum","content": "Text1"},{"chapter": "CHAPTER 1","title": "1.1 Introduction","content": "Text2"},{"chapter": "CHAPTER 1","title": "1.2 Main Idea", "content": "Text3"},{"chapter": "CHAPTER 2","title": "2.1 Architecture","content": "Text4"},{"chapter": "CHAPTER 3","title": "3.1 Liter.overview","content": "Text5"}]';

var myData = JSON.parse(jsonString);
$(document).ready(function() {
    function dContent() {
       $("#content").css("border","2px solid red").css("height","100px");
       $("#content").html($(this).data('value'));
    }
     $("#courses").on('click','li', dContent) 
    $.each(myData, function(index,item) { 
    $("#courses").append("<li class='li' data-value="+item.content+">"+item.chapter+"  <p>"+item.title+"</p></li>");

    })



});

JSFIDDLEのデモ

于 2013-02-21T20:22:18.467 に答える
0

this.[i].chapterおそらくmyData[i].chapter。そのままでは、構文エラーです。

this次に、他の使用法が正しいかどうかを再考する必要があります。

于 2013-02-21T23:22:54.763 に答える
0

これをJSFiddleにコピーし、jQueryもチェックインすると、機能します。

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var $clist = $('#courses');

    $.each(myData, function(i,o){
        $('<li><h3>' +o.chapter+ '</h3><p>' +
          '<a href="#page2" onclick="dContent(\''+o.content+'\')">' +
          o.title + '</a></p></li>').appendTo($clist);
    });

    window.dContent = function(content) {
        var $ccontent = $('#content');
        $ccontent.append(content);

    } 
});
于 2013-02-21T23:39:02.350 に答える