Question

下面通过JSON拉出Reddit内容并将其放在相应的内容中。我自己的迷你reddit。现在，您可以看到URL正在从/ r / images中提取。我希望能够在输入框中键入“buildapcsales”，并使用从/ r / buildapcsales reddit中提取的脚本重新加载页面的该部分。

我似乎无法找到更改脚本内容的方法，或者为此更改任何其他解决方法。我试图创建多个文件并让它们加载on.click，但是不可能已经构建了一个脚本来匹配某人在输入框中输入的每个可能的结果。

有没有办法在on.click上编辑HTML页面内容？或者通过输入框？我发现没有证据表明这可以通过我的在线研究实现。

<script>
$.getJSON(
    "https://www.reddit.com/r/images.json?jsonp=?",
    function foo(data) {
        $.each(
            // iterate over 10 children, starting at the 0th index
            data.data.children.slice(0,12),
            function (i, post) {
                // put data into the corresponding DIV
                $('#news' + i + ' .redditTitle').append('<a href="https://www.reddit.com/' + post.data.permalink + '">' + post.data.title + '</a>');
                $('#news' + i + ' .redditPermalink').append('<div class="info">expand_more</div>');
                $('#news' + i + ' .redditUps').append(post.data.ups);
                $('#news' + i + ' .redditDowns').append(post.data.downs);
                $('#news' + i + ' .redditPost').append('<p>' + post.data.selftext_html + '</p>');
                $('#news' + i + ' #subredditName').append('<p class="subredditName smalltext alignleft floatleft s-l-padding">r/' + post.data.subreddit + '</p>' );
                $('#news' + i + ' .redditThumbnail').append('<a href="' + post.data.url + '"><img src="' + post.data.thumbnail + '" class="floatleft image news hide">' + '</a>');
                $('#news' + i + ' #redditUsername').append('<p class="smalltext p-color alignleft floatleft s-l-padding redditUsername">'
                    + '<a href="https://www.reddit.com/user/' + post.data.author + '">' + post.data.author + '</a>' + '</p>');
            //Decodes HTML into correct format
            //Also replaces "null" post text with blank value
                $('.redditPost').each(function(){
                    var $this = $(this);
                    var t = $this.text();
                    $this.html(t.replace('&lt','<').replace('&gt', '>'));
                    $this.html(t.replace('null','').replace('null', ''));
                });
            //Checks for "self" tagged images and replaces them with a default placeholder image
                function changeSourceAll() {
                    var images = document.getElementsByTagName('img');
                    for (var i = 0; i < images.length; i++) {
                        if (images[i].src.indexOf('self') !== -1) {
                            images[i].src = images[i].src.replace("self", "/images/default.png");
                        }
                    }
                    for (var i = 0; i < images.length; i++) {
                        if (images[i].src.indexOf('default') !== -1) {
                            images[i].src = images[i].src.replace("self", "/images/default.png");
                        }
                    }
                }
                changeSourceAll();

            }
        )
    }
).error(function() { alert("error"); })

提前感谢您的任何建议！

Answer 1

我希望能够键入＆＃34; buildapcsales＆＃34;在一个输入框中，并使用从/ r / buildapcsales reddit中提取的脚本重新加载页面的该部分。

为此你需要一个输入框。

<input type="text" name="subreddit" />

然后，您需要一种方法来获取输入框的值。

$('input[name="subreddit"]').val();

当字段更改时获取该值可能也很有用。

$('input[name="subreddit"]').on('change', function () ...

然后，您需要构建一个动态URL。您应该使用encodeURIComponent对任何内容进行编码，以确保正确转义任何特殊字符。

'https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json'

另外，我发现你使用的是JSON-P。不需要...... Reddit的标题中包含Access-Control-Allow-Origin: *，允许跨域加载此数据而不会出现问题。直接加载数据更加可靠，并且可以正确捕获错误。

我似乎无法找到更改脚本内容的方法，或者为此更改其他任何解决方法。

您不需要更改脚本。您需要的是一个函数，您可以使用参数调用该函数，然后将其连接到URL的其余部分。这样，您可以加载任何您想要的subreddit。

function loadRedditData(subreddit) {
    $.getJSON('https://www.reddit.com/r/' + encodeURIComponent(subreddit) + '.json').then(function (data) {
        console.log(data);
    });
}

$(function () {
  $('input[name="subreddit"]').on('change', function () {
      loadRedditData($(this).val()); // Pass the value of the input to the loadRedditData function
  });
});

有没有办法在on.click上编辑HTML页面内容？或者通过输入框？我发现没有证据表明这可以通过我的在线研究实现。

当然有可能。否则，Stack Overflow，Gmail，Google Maps，Facebook等网站几乎都无法实现。不确定你在寻找什么，但这里的关键词是＆＃34; DOM操作＆＃34;。 DOM是文档对象模型......它是表示页面的树结构。通过修改元素，您可以在页面上控制它们。

你需要改变你的想法，＆＃34;将HTML元素编写为格式化指令＆＃34;，以及＃34;编写被解释和加载为树的元素的HTML＆＃34;。一旦您以这种方式看到它，您就不必担心将数据连接到标签中。您只需编辑这些标记的属性即可。这应该让你开始：

$('.content').append(
  $('<a>')
    .attr('href', 'https://www.reddit.com/' + post.data.permalink)
    .text(post.data.title)
);

如果将文本连接到HTML的上下文中，它将被解释为HTML，而这根本不是您想要的。想象一下有人创建了一个标题为<script src="somethingEvil.js"></script>的帖子。这是设置元素属性和文本的关键因素之一。

Onclick在脚本标记内部更改功能

1 个答案: