javascript - 如何使用 Jquery 获取一个类并执行一个功能

Question

我目前正在从事一个处理来自网站的提要的项目。我已成功获得提要，但我的挑战是当用户单击提要链接而不是将用户带到提要站点时获取提要的内容和标题。

我尝试过使用不同的方法来获得解决方案，但没有一个有效。

以下是我的最新代码（Jquery Mobile）

    (function($){
    $.fn.FeedEk=function(opt){
        var def={FeedUrl:'', MaxCount:5, ShowDesc:true, ShowPubDate:true, ShowFullContent:true};
        if(opt){
            $.extend(def,opt)
        }
        var idd = $(this).attr('id');
        if(def.FeedUrl==null || def.FeedUrl==''){
            $('#'+idd).empty();
            return;
        }
        var pubdate;
        $('#'+idd).empty().append('<div style="text-align:center; margin: auto;"><img src="loader.gif" class="loader" /></div>');
        $.ajax({
            url:'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+def.MaxCount+'&output=json&q='+encodeURIComponent(def.FeedUrl)+'&callback=?',
            dataType:'json',
            success:function(data){
                $('#'+idd).empty();
                $('#post').empty();
                var output = '<ul data-role="listview" data-filter="true">';
                $.each(data.responseData.feed.entries,function(i,entry){
                    var i =new Array(i);
                    for(j=0;j<=i;j++)
                        {
                            var id = j;
                        }
                    var title =new Array(entry.title);
                    var content =new Array(entry.content);
                    for(t=0;t<title.length;t++){
                        for(c=0;c<content.length;c++){$('#post').append(title[t]+'<br/>'+content[c])}
                    }
                    //while(id == 
                        //if(i == id
                        //var post = '<div><h3>'+entry.title+'</h3></div>';
                        //post += '<div>Post content'+entry.content+'</div>';
                    output += '<li>';
                    output += '<a href="#postContent" class="ItemTitle '+id+'">'+entry.title+'</a>';
                    /*if(def.ShowPubDate){
                        pubdate=new Date(feed[0].entry.publishedDate);
                        output += '<br/><span class="ItemDate">'+pubdate.toLocaleDateString()+'</span';
                    }
                    if(def.ShowDesc){
                        output += '<br/><span class="ItemDesc">'+feed[0].entry.contentSnippet+'</span>';
                    }*/
                    output += '</li>';});
            console.log(data.responseData.feed.entries);
            output += '</ul>';
            $('#'+idd).html(output);
                if($('.'+id).click() == true){
                    $('#post').empty();
                    var postTitle = title[id];
                    var postContent = content[id];
                    $('#post').append('<div><h3>'+postTitle+'</h3></div><div>'+postContent+'</div>');
                }
            }
        })

    }
    })
    (jQuery);

下面是 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>News on the GO!</title>
    <link href="theme/news.min.css" rel="stylesheet" />
    <link href="theme/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" />
    <link href="theme/FeedEk.css" rel="stylesheet" type="text/css" />
    <script type="application/javascript" src="js/jquery1.7.2-min.js" ></script>
    <script type="application/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>

    <script type="application/javascript" src="js/FeedEk.js"></script>

    <link href="theme/custom.css" rel="stylesheet" type="text/css" />
    <script type="application/javascript" src='js/main.js'></script>
    <script type="application/javascript">
        $(document).ready(function() {
            //latest
            $("#ipaid").FeedEk({
              FeedUrl : 'http://ipaidabribenaija.com/news?format=feed',
              MaxCount : 7,
              ShowDesc : true,
              ShowPubDate:true,
              ShowFullContent:true
            });});
    </script>
</head>

<body>
    <div data-role="page" id="home">
        <div data-role="header" data-position="fixed" data-theme="a">
            <h2>Recent News</h2>
            <a href="#about" data-icon="info" data-theme="a" data-iconpos="notext" class="ui-btn-right" data-rel="dialog">About</a>
        </div><!-- /header -->
        <div class="imghome">
            <img src="images/news.png" alt="news" width="300" height="200" />
        </div>
        <nav data-role="navbar">
            <ul>
                <li><a href="#latest" data-theme="a" data-transition="flip" >Local News</a></li></ul>
        </nav>
        <!--<div data-role="content" >
        </div><!-- /content -->
        <div data-role="footer" data-position="fixed" data-theme="a"></div><!-- /footer -->
    </div><!-- /Page home -->

    <div data-role="page" id="latest" data-title="Local News">
        <div data-role="header" data-position="fixed" data-id="ipaid_header" data-theme="a">
            <h2>Local News</h2>
            <a href="#home" data-rel="back" data-icon="back" data-theme="a">Back</a>
        </div><!-- /header -->
        <div data-role="content" >
            <div id="ipaid">
            </div>
        </div><!-- /content -->
        <div data-role="footer" data-position="fixed" data-id="ipaid_footer" data-theme="a">
            <div data-role="navbar" data-theme="a">
                <ul>
                    <li><a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a></li>
                    <li><a href="#politics" data-role="button" data-icon="arrow-r">Politics</a></li>
                    <li><a href="#world" data-role="button" data-icon="arrow-r">Sports</a></li>
                    <li><a href="#business" data-role="button" data-icon="arrow-r">Business</a></li>
                 </ul>
            </div><!-- /Footernavbar --></div><!-- /footer -->
    </div><!-- /Page Latest --></body>
    </html>

score 2 · Accepted Answer

据我了解。您希望在网页的单独页面上显示每个新闻提要，并防止链接打开新窗口（离开您的网页）。

您可以执行以下操作，当然它需要一些调整和 CSS 样式，这可以轻松完成。下面的代码防止在新窗口中打开链接， - 使用preventDefault()- 它复制提要详细信息（标题、图像、全文..等）并将它们动态附加到新页面。

每个页面都有一个自动生成的 ID，以防您想使用Swipe 事件或任何其他方法在它们之间导航。

工作示例

代码：

var pageid = 0;

$('#ipaid').on('click', 'a', function (e) {
 pageid++;
 e.preventDefault();
 var clicked = $(this);
 var root = clicked.closest('li');
 var linkto = clicked.attr('href');
 var title = clicked.text();
 var date = clicked.parent('div').next('div').text();
 var linkdiv = root.find('div.itemTitle');
 var datediv = root.find('div.itemDate');
 var contentdiv = root.find('div.itemContent');
 var image = contentdiv.first('div').find('img').attr('src');
 var article = '';
 contentdiv.find('p').each(function () {
    article += $(this).text();
});

 var newPage = $("<div data-role=page id='page" + pageid + "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" + title + "</h1></div><div data-role=content><p>Date:" + date + "</p><img src='" + image + "'></div><div class='article'><p>" + article + "</p></div></div></div");

 newPage.appendTo($.mobile.pageContainer);

 $.mobile.changePage('#page' + pageid);
});

score 0 · Accepted Answer

我认为你很简单需要jFeed。jFeed 站点的示例代码：

jQuery.getFeed(options);

   options:

   * url: the feed URL (required).
   * data: data to be sent to the server. See jQuery.ajax data property.
   * success: a function to be called if the request succeeds.
     The function gets passed one argument: the JFeed object.

   Example:

   jQuery.getFeed({
       url: 'rss.xml',
       success: function(feed) {
           alert(feed.title);
       }
   });

javascript - 如何使用 Jquery 获取一个类并执行一个功能

2 回答 2

Related

Reference