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

私が理解した限り。Web ページの個別のページに各ニュースフィードを表示し、リンクが新しいウィンドウを開く (Web ページを離れる) のを防ぎたいとします。

もちろん、簡単に実行できる調整と CSS スタイリングが必要です。以下のコードは、リンクを新しいウィンドウで開くのを防ぎます - を使用してpreventDefault()- フィードの詳細 (タイトル、画像、記事全体など) をコピーし、それらを新しいページに動的に追加します。

スワイプイベントやその他の方法を使用してページ間を移動する場合に備えて、各ページには自動生成された ID があります。

実施例

コード：

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