0

私はJQueryとJavascriptの両方に非常に慣れていません。フィードがあります。これらのフィードを折りたたみ可能な div として折りたたみ可能な div 内に表示したいと考えています。次の Javascript ファイルがあります。

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript">
    google.load("feeds", "1");
    google.setOnLoadCallback(showFeed);

    function showFeed() {
      var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("headlines");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
            di.innerHTML = '<h3>' + entry.title + '</h3>';
            di.innerHTML += '<p>' + entry.contentSnippet + '</p>';
            container.appendChild(di);
          }
        } else {
            var container = document.getElementById("headlines");
            container.innerHTML = '<li>Get your geek news fix at site</li>';
        }
      });
    }
</script>

<body>
    <div data-role="collapsible-set" id="headlines"></div> 
</body>

これはすべてのフィード名を取得し、折りたたみ可能な div に配置する必要があります。これはまさにそれを行いますが、JQuery Mobile の折りたたみ可能な div ではなくプレーンな HTML テキストとして名前を表示します。

4

1 に答える 1

0

@AML、コード全体を分析しないため、これは回答よりもコメントですが、フォーマットの目的でここに配置します。

行で：

var di = document.createElement("div").setAttributeNode("data-role", "collapsible");

新しく作成された要素へのpointer（di）を取得せず、setAttributeNode（...）の結果を取得します。次のように、コードを2行に分割する必要があります。

var di = document.createElement("div");
di.setAttribute("data-role", "collapsible");

setAttributeNodeが実際にはsetAttributeであることに問題があります。現在は機能しています。http：//pannonicaquartet.com/test/feeds.htmlを参照してください。

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
<style type="text/css">
    .collapsible{
        display : none;
    }
    h3{
        background-color : lightgray;
    }
</style>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("feeds", "1");

    function showFeed() {
      var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("headlines");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.onclick = function(evt){
                var elP = this.children[1];
                if(elP.style.display == 'inline'){
                   elP.style.display = 'none';
                }else{
                   elP.style.display = 'inline';
                }
            };
            div.innerHTML = '<h3>' + entry.title + '</h3>';
            div.innerHTML += '<p class="collapsible">' + entry.contentSnippet + '</p>';
            container.appendChild(div);
          }
        }
      });
    }

    google.setOnLoadCallback(showFeed);

</script>
于 2013-01-06T14:48:43.187 に答える