0

我正在尝试设置我的一个链接，以便在单击它时会显示一些信息。目前，链接和链接中的信息会同时显示。我想先显示链接，然后在单击第一个链接后显示这些链接的信息。

这是我的代码，

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script >
$(document).ready(function($) {
 // First link out of three
 var url = 'https://www.sciencebase.gov/catalog    
/items?parentId=504108e5e4b07a90c5ec62d4&max=60&offset=0&format=jsonp';

$.ajax({
    type: 'GET',
    url: url,
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
                 var linkBase = "http://www.sciencebase.gov/catalog/item/";
                 var link = "";

                 $.each(json.items, function(i,item){
                     link = linkBase + this.id
                     $('#sbItems').append('<li><b><a href="' + link + '">' +     
this.title + '</a> - </b>' + this.summary + '</li>');            
                 });

             for (var i = 21; i < 22; i++) {
                     var urlId = json.items[i].id;
             }

                 var itemLnkId =  urlId;
                 //alert(itemLnkId);

                 $.ajax({
                     type: 'GET',
                     url: 'https://www.sciencebase.gov/catalog/itemLink/' + 
itemLnkId + '?format=jsonp',
                     jsonpCallback: 'getSBJSON',
                     contentType: "application/json",
                     dataType: 'jsonp',
                     success: function(json) {
                                  var linkBase = "http://www.sciencebase.gov/
catalog/item/";
                                  var link = "";
                                  $.each(json, function(i,item){
                                      link = linkBase + this.relatedItemId
                                      $('#sbItems').append('<li><a href="' + 
link + '">' + this.title + '</a></li>');            
                                  });

                 for (var i = 19; i < 20; i++) {
                         var urlId = json.items[i].id;
                 }

                     var itemLnkId =  urlId;
                     //alert(itemLnkId);
                     },
                     error: function(e) {
                         console.log(e.message);
                     }
                 });
    },
    error: function(e) {
        console.log(e.message);
    }
});
});
</script>
</head>
<body>
<p><em>This is a simple example of a basic HTML page that uses JQuery to call 
items from ScienceBase in JSON format and output them on the page. It serves 
to show how a basic web application can interact with dynamic ScienceBase 
services. The code points out the one critical feature of such an application, 
the use of a callback method in the Javascript to allow web pages on one domain 
to call and render JSON from another domain (www.sciencebase.gov). The listing 
below comes from a query for items under a particular ScienceBase parent item - 
a set of project records from the USGS National Research Program. The listing 
shows title with a link to the full project record in ScienceBase and summary 
(first part of a full abstract). View source for code examples and inline 
comments.</em></p>

<h3>Projects of the USGS Water National Research Program</h3>

<div class='wrapper'>
<ul id='sbItems'></ul>
</div>
</body>
</html>

这是 jsfiddle 链接http://jsfiddle.net/XzRFu/ 感谢您的帮助！

4

1 回答 1

0

jc72,

试试这个大小 - 根据你的小提琴：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 10px;
}
#programs {
    margin: 12px 0;
    font-family: verdana, arial;
    font-size: 10pt;
}
#programs h2, #programs h3 {
    margin: 5px 0;
    cursor: pointer;
}
#programs ul {
    margin: 5px;
    padding: 10px;
    list-style-type: disc;
}
#programTemplate, #projectTemplate {
    display: none;
}
.summary {
    display: none;
}
.prog .p_loading,
.related .loading {
    display: none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
    function getData(url) {
        return $.ajax({
            type: 'GET',
            url: url,
            jsonpCallback: 'getSBJSON',
            contentType: "application/json",
            dataType: 'jsonp'
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ' : ' + errorThrown);
        });
    }

    var strings = {
        linkTemplate: 'http://www.sciencebase.gov/catalog/item/%s',
        programUrlTemplate: 'https://www.sciencebase.gov/catalog/items?parentId=%s&max=60&offset=0&format=jsonp',
        urlTemplate: 'https://www.sciencebase.gov/catalog/itemLink/%s?format=jsonp',
        relatedLinkTemplate: '<a href="%s1">%s2</a>'
    };
    var $programTemplate = $("#programTemplate").find(".prog");
    var $projectTemplate = $("#projectTemplate").find(".project");

    function getProjects($program) {
        var $progContainer = $programTemplate.clone().insertAfter($program);
        var $ul = $progContainer.find(".program");
        var url = strings.programUrlTemplate.replace('%s', $program.attr('id'));
        $program.on('click', function() {
            if(!$program.data('served')) {
                $progContainer.show().find(".p_loading").show();
                getData(url).done(function(json) {
                    if(json.items.length) {
                        $.each(json.items, function(i, item) {
                            //if(i !== 21) return true;
                            var $project = $projectTemplate.clone().appendTo($ul);
                            var $title = $project.find(".title").text(item.title).on('click', function() {
                                $project.find(".summary").slideToggle();
                            });
                            $project.find(".text").html(this.summary);
                            //$project.find(".more").attr('href', strings.linkBase + item.id);
                            $project.find(".more").attr('href', strings.linkTemplate.replace('%s',item.id));
                            var $relatedUl = $project.find("ul.relatedLinks");
                            $project.find(".getRelated").on('click', function(e) {
                                var $this = $(this);
                                if(!$this.data('served')) {
                                    $project.find(".loading").show();
                                    getData(strings.urlTemplate.replace('%s', item.id)).done(function(json2) {
                                        if(json2.length) {
                                            $.each(json2, function(j, item2) {
                                                $("<li/>").appendTo($relatedUl).append($(strings.relatedLinkTemplate.replace('%s1', strings.linkBase + item2.relatedItemId).replace('%s2', item2.title)));
                                            });
                                        }
                                        else {
                                            $("<li>None</li>").appendTo($relatedUl);
                                        }
                                        $relatedUl.slideDown('slow');
                                        $project.find(".loading").hide();
                                    });
                                    $this.data('served', true);
                                }
                                else{
                                    $relatedUl.slideToggle('slow');
                                }
                                return false;
                            });
                        });
                    }
                    else {
                        $("<li>None</li>").appendTo($ul);
                    }
                    $ul.slideDown('slow');
                    $progContainer.find(".p_loading").hide();
                });
                $program.data('served', true);
            }
            else {
                $ul.slideToggle('slow');
            }
        });
    }

    $("h2.program").each(function(i, program) {
        getProjects( $(program) );
    });
});
</script>
</head>

<body>

<div id="programTemplate">
    <div class="prog">
        <div class="p_loading">Loading ...</div>
        <ul class="program"></ul>
    </div>
</div>

<ul id="projectTemplate">
    <li class="project">
        <h3 class="title"></h3>
        <div class="summary">
            <div>
                <span class="text"></span>
                <span><a class="more" href="" target="_new">more ...</a></span>
            </div>
            <div>
                <a href="#" class="getRelated">Related links ...</a>
            </div>
            <div class="related">
                <div class="loading">Loading ...</div>
                <ul class="relatedLinks"></ul>
            </div>
        </div>
    </li>
</ul>

<p><em>This is a simple example of a basic HTML page that uses JQuery to call items from ScienceBase in JSON format and output them on the page. It serves to show how a basic web application can interact with dynamic ScienceBase services. The code points out the one critical feature of such an application, the use of a callback method in the Javascript to allow web pages on one domain to call and render JSON from another domain (www.sciencebase.gov). The listing below comes from a query for items under a particular ScienceBase parent item - a set of project records from the USGS National Research Program. The listing shows title with a link to the full project record in ScienceBase and summary (first part of a full abstract). View source for code examples and inline comments.</em></p>

<div id="programs">
    <h2 class="program" id="504108e5e4b07a90c5ec62d4">Projects of the USGS Water National Research Program</h2>
    <!-- add other programs here -->
</div>

</body>
</html>

演示

它需要使用更好的 CSS 进行美化，但基本功能就在那里。

于 2012-12-05T03:29:43.290 回答