0

リンクをクリックすると何らかの情報が表示されるように、リンクの 1 つを設定しようとしています。現在、リンクとリンクからの情報が一度に表示されます。最初にリンクを表示し、最初のリンクがクリックされた後にそれらのリンクからの情報を表示したいと思います。

ここに私のコードがあります、

<!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 に答える