如何查询并保存数组中的链接以供以后调用? [英] How to query and save link in array to call later?

问题描述

我正在Wikipedia中进行查询，以获取摘要和带有链接的标题.然后，如果我单击标题，则希望以模态形式获得全文.

I am doing a query in wikipedia to get a snippet and the title with the link. Then if i click a title I would like to get the full article in a modal.

我试图为我在第一个查询中获得的每个不同链接获取不同的文章.

I am trying to get different articles for each different link I get in the first query.

这是一个JsFiddle

$("#wiki").on('click', function(e) {
    var articleName = $(this).data('subject');
    $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", {
        srsearch: articleName,
        action: "query",
        list: "search",
        format: "json"
    }, function(data) {
        $("#results ul").empty();
        $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text();
        $.each(data.query.search, function(i, item) {
            $("#results").append("<li><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "' data-toggle='modal' data-target='.bs-example-modal-lg'>" + item.title + "</a><br>" + item.snippet + "</li");
            var myLink = $("#results ul li a").attr("href");
            $("#results div a").attr("href", "#");
        $('.modal').on('show.bs.modal', function (e) {
            $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
                page: articleName, 
                prop:"text"
            }, function(data) {
                $(".modal-content").html(data.parse.text['*']);
            });
        });
    });
});

HTML

<button id="wiki" data-subject="Paris">Wikipedia</button>
<output id="results">
 <ul>
 </ul>
</output>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>

推荐答案

在ul a元素click事件的#wiki元素click，event.preventDefault()和event.stopPropagation()处使用.one()；在show.bs.modal事件处理程序内的$.getJSON()调用处将page设置为e.relatedTarget.textContent

Use .one() at #wiki element click, event.preventDefault(), event.stopPropagation() at ul a element click event; set page to e.relatedTarget.textContent at $.getJSON() call within show.bs.modal event handler

$("ul").on("click", "a", function(e) {
  e.preventDefault();
  e.stopPropagation();
})
$("#wiki").one('click', function(e) {
    var articleName = $(this).data('subject');
    $.getJSON("https://en.wikipedia.org/w/api.php?callback=?", {
        srsearch: articleName,
        action: "query",
        list: "search",
        format: "json"
    }, function(data) {
        $("#results ul").empty();
        $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text();

        //For each result i set a <li> with the title and snippet. 
        //The title will be a disabled link with the 
        //data-attributes to load the modal

        $.each(data.query.search, function(i, item) {
            $("#results").append("<li><a href='https://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "' data-toggle='modal' data-target='.bs-example-modal-lg'>" + item.title + "</a><br>" + item.snippet + "</li");

        // At this point I set the url in a variable
        // Probably I should save the url in an array since I may have many results

            var myLink = $("#results ul li a").attr("href");

        // Here I disable the link

            $("#results div a").attr("href", "#");
        });

       // Here I say that as soon as the modal is open, 
       //I should make another query based on the title and get the full article
      // This is where I have the issue as the URL should be what I have saved

        $('.modal').on('show.bs.modal', function (e) {
            $.getJSON("https://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
                page: e.relatedTarget.textContent, 
                prop:"text"
            }, function(data) {
                $(".modal-content").html(data.parse.text['*']);
            });
        });
    });
});

jsfiddle https://jsfiddle.net/kgyc8to4/26/

jsfiddle https://jsfiddle.net/kgyc8to4/26/

这篇关于如何查询并保存数组中的链接以供以后调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！