个人中心
gpt4 book ai didi

javascript - 如何使用 Jquery 获取一个类并执行一个函数

转载 作者：行者123 更新时间：2023-11-28 00:10:17 25 4
gpt4 key购买 nike

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

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

下面是我最新的代码(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>

最佳答案

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

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

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

Working example

代码:

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);
});

关于javascript - 如何使用 Jquery 获取一个类并执行一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15709093/

25 4 0
文章推荐： VC++ 和 g++/Xcode 之间的 C++ 模板函数差异
文章推荐： c++ - 在构造函数中按值或 const 引用传递的参数
文章推荐： 文本文件的 HTML Web 下载链接
文章推荐： HTML5 服务器发送事件和多个客户端(不使用 cometd )
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com