Fatal编程技术网
  • javascript/
  • Javascript jQuery移动代码有问题吗

Javascript jQuery移动代码有问题吗

javascript jquery html jquery-mobile

Javascript jQuery移动代码有问题吗,javascript,jquery,html,jquery-mobile,append,Javascript,Jquery,Html,Jquery Mobile,Append,我正在开发一个jquery移动网页。在其中一个页面中，我想实现一个RSS阅读器。我在网上找到了一个RSS阅读器，看起来像这样： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/

我正在开发一个jquery移动网页。在其中一个页面中，我想实现一个RSS阅读器。我在网上找到了一个RSS阅读器，看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="themes/CustomTheme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <style type='text/css'>
        .ui-footer .ui-btn-right {
        }
        .articleContent > table > tbody > tr > td > font > br {
            display: none;
        }
        .articleContent > table > tbody > tr > td > font > br + div {
            display: none;
        }
        .articleContent * {
            font-size: medium !important;
        }
    </style>

</head>

<body>




<script type='text/javascript'>//<![CDATA[ 

// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20; /* writing HTML */
document.write('<div data-role="page" id="list">' + '  <div data-role="header" data-position="fixed">' + '    <h1><span id="widgetTitle">...</span> ' + '      <span style="font-size: x-small">(HTML)</span></h1>' + '  </div>' + '  <div data-role="content">' + '    <ul data-role="listview" data-filter="true" id="articleList">');
for (var i = 1; i <= maxLength; i++) {
    document.write('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>');
}
document.write('    </ul>' + '  </div>' + '</div>');
for (i = 1; i <= maxLength; i++) {
    document.write('<div data-role="page" id="article' + i + '">' + '  <div data-role="header" data-position="inline">' + '    <a href="#list" data-role="button" data-icon="home" data-back="true">Home</a>' + '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' + '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + '      class="ui-btn-right" rel="external">Open</a>' + '  </div>' + '  <div data-role="content">' + '    <div id="articleContent' + i + '" class="articleContent"></div>' + '    <div data-role="controlgroup" data-type="horizontal">' + '      <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' + '        data-inline="true" class="prevButton">Prev</a>' + '      <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' + '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' + '    </div>' + '  </div>' + '</div>');
} /* JSONP */
$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

/*
  getOnlineFeed('http://www.engadget.com/rss.xml');
  getOnlineFeed('http://www.fremont.k12.ca.us/site/RSS.aspx?DomainID=1&ModuleInstanceID=4613&PageID=1');
  getOnlineFeed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&topic=h');
  getOnlineFeed('http://www.appbank.net/feed');
  getOnlineFeed('http://japanese.engadget.com/rss.xml');
  getOnlineFeed('http://www.bebit.co.jp/index.xml');  
  getOnlineFeed('http://www.ntt.com/rss/release.rdf?link_id=ostop_service_rss');
  getOnlineFeed('http://feeds.feedburner.com/gapsis');
  getOnlineFeed('http://octoba.net/feed');
  getOfflineFeed('google_news_jsonp.js');
*/
}); /* functions */
var listEntries = function(json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};
var getOnlineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q=' + encodeURIComponent(url) + '&v=1.0&num=' + maxLength);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', url);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
//]]>  

</script>


</body>


</html>

$(document).on("pageshow", '#news', function() {

// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20; /* writing HTML */

alert("Hello World!");

//Not sure if .listView('refresh'); is needed. Check it!
for (var i = 1; i <= maxLength; i++) {
    $(".RSSclass").append('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>');
}


for (i = 1; i <= maxLength; i++) {
    document.write('<div data-role="page" id="article' + i + '">' + '  <div data-role="header" data-position="inline">' + '    <a href="#list" data-role="button" data-icon="home" data-back="true">Home</a>' + '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' + '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + '      class="ui-btn-right" rel="external">Open</a>' + '  </div>' + '  <div data-role="content">' + '    <div id="articleContent' + i + '" class="articleContent"></div>' + '    <div data-role="controlgroup" data-type="horizontal">' + '      <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' + '        data-inline="true" class="prevButton">Prev</a>' + '      <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' + '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' + '    </div>' + '  </div>' + '</div>');
} /* JSONP */
$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

/*
  getOnlineFeed('http://www.engadget.com/rss.xml');
  getOnlineFeed('http://www.fremont.k12.ca.us/site/RSS.aspx?DomainID=1&ModuleInstanceID=4613&PageID=1');
  getOnlineFeed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&topic=h');
  getOnlineFeed('http://www.appbank.net/feed');
  getOnlineFeed('http://japanese.engadget.com/rss.xml');
  getOnlineFeed('http://www.bebit.co.jp/index.xml');  
  getOnlineFeed('http://www.ntt.com/rss/release.rdf?link_id=ostop_service_rss');
  getOnlineFeed('http://feeds.feedburner.com/gapsis');
  getOnlineFeed('http://octoba.net/feed');
  getOfflineFeed('google_news_jsonp.js');
*/
}); /* functions */
var listEntries = function(json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};
var getOnlineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q=' + encodeURIComponent(url) + '&v=1.0&num=' + maxLength);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', url);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
//]]>  

});
有什么想法吗？

我复制了你的代码，有两条错误消息

  • 列表项未定义
  • maxLength未定义
如果将以下代码放在语句
$（document）之前。在（“pageshow”，“#news”，function（）{
上，它们都是已知的，并且会显示提要中的内容：

<script type='text/javascript'>//<![CDATA[ 

var maxLength = 20; /* writing HTML */

function listEntries (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};

$(document).on("pageshow", '#news', function() {
// rest follows here

//maxLength）？maxLength:articleLength；

对于（var i=1；i您必须修改
listEntries
函数，因为这是JSOP在回调时调用的函数


var listEntries = function (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $(".RSSclass").append('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">' + entry.title + '</a></li>');
    }
    $('.RSSclass').listview('refresh');
};



var listEntries=function（json）{
如果（！json.responseData.feed.entries）返回false；
$（'widgettile'）.text（json.responseData.feed.title）；
var articleLength=json.responseData.feed.entries.length；
articleLength=（articleLength>maxLength）？maxLength:articleLength；
对于（var i=1；i


然后，您必须删除上面的脚本通过
document.write自动生成的内容

这里有一个工作的JsBin。

希望这会有所帮助。
您可能应该设置一个比“jQuery移动代码有问题”更具体的标题。您必须将标记添加到
.RSSclass
中，然后在完成时通过实例化列表视图（如
$（'.RSSclass'））来标记整个列表视图。listview（）
将函数移动到头或
pageshow
事件的开头。我移动了它，但仍然得到相同的错误。@Rob我不明白你的意思：@JohnyJaz如果你能成功迭代每个RSS项目，请将其添加到列表
。RSSclass
中，然后当RSS项目全部添加后，你必须通过调用重新加载listviewg
$（'.RSSclass'）.listView（）
和jQueryMobile将添加适当的标记，使其看起来像它应该的那样。也许您可以得到一个JSFIDLE工作图，显示其损坏的位置，我们可以查看一下。谢谢您，先生。但是我得到了与以前完全相同的错误：/它的行为似乎没有任何不同。您只是添加了上述代码还是删除了匹配的代码部分（var
maxLength
和
var listEntries=function（）…
以及？chrome开发工具中的确切错误消息是什么？如果您在JSFIDDLE上发布完整的代码示例会有所帮助。我添加了您所说的代码并删除了上述部分。我得到的错误与以下相同：未捕获类型错误：未定义不是函数"正如我之前提到的。你可以查看我编辑过的问题，并看到我得到的截图！我会按照你的建议尝试使用fiddler，尽管我不知道如何在其中添加我的所有Javascript和css文件。我永远无法让它工作…：请查看我编辑过的问题！我添加了一个fidler链接，并解释到底发生了什么。这是这正是我在这里得到的结果。我假设你已经解决了这个问题。正如其他人已经提到的，在标题中保持精确总是很好的：据我所知，你有两个问题：javascript没有通过使用谷歌提要api和css布局加载提要，jquery.mobile不起作用。太棒了@Rob wow！非常感谢！但是，脚本现在不会引导我找到文章，因为它应该：（.假设当你选择其中一篇文章时，你应该导航到文章页面并阅读该文章的RSS提要。你只在列表视图中显示标题。但是当我单击列表视图上的某个内容时，什么都没有发生。我现在正试图查看，这里出了什么问题，但是如果你有时间，我将感谢你的帮助！谢谢再一次，伙计！！@JohnyJaz当然不是因为我没有添加链接。你真的能够理解JSON输出吗？这里的链接工作得很好，我似乎没有完全理解它，但我正在尽我最大的努力。你说你没有添加链接是什么意思？你发布的最后一个链接对我不起作用，所以我看不出有什么不同代码中的nce.aah OK！！！现在我明白了！我在url的末尾添加了“/编辑？html，输出”我可以看到它。是的，它现在工作得很好。但是它有点重定向到网页。原始的RSS在jquery移动环境中显示提要，然后让用户选择导航到页面，如果他喜欢的话。知道我们如何也可以采用此功能吗？请在代码
$（“.RSSclass”）中尝试此链接。追加（'
  • ”；
    我实际上没有创建任何链接。我使用的是您上面发布的代码。但是，将其更改为
    $（“.RSSclass”）。追加（“
  • ”）；
    它会起作用。如果您无法理解这些内容，这有什么用？我们是在浪费时间还是在为您工作？

    $(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

    

    <script type='text/javascript'>//<![CDATA[ 

var maxLength = 20; /* writing HTML */

function listEntries (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};

$(document).on("pageshow", '#news', function() {
// rest follows here

    

    var listEntries = function (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $(".RSSclass").append('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">' + entry.title + '</a></li>');
    }
    $('.RSSclass').listview('refresh');
};

    

    <div data-role="page" id="news" data-theme="a">
    <div data-role="panel" id="mypanel">
        <ul data-role="listview" data-inset="false">
            <li data-role="list-divider">Espacio Joven</li>
            <li><a href="#news" class="ui-btn-active ui-state-persist">News</a>
            </li>
            <li><a href="#agenda" class="ui-btn-active ui-state-persist">Agenda</a>
            </li>
            <li><a href="#info" class="ui-btn-active ui-state-persist">Info</a>
            </li>
            <li><a href="#activities" class="ui-btn-active ui-state-persist">Activities</a>
            </li>
            <li><a href="#alDia" class="ui-btn-active ui-state-persist">Al Dia</a>
            </li>
            <li data-role="list-divider">La Noche Es Joven</li>
        </ul>
    </div>
    <!-- /panel -->
    <div data-role="header"> <a href="#mypanel" data-icon="grid" data-iconpos="notext"></a>

         <h1>News</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" class="RSSclass"></ul>
    </div>
    <!-- /content -->
</div>