Onclick更改腳本標記內的函數

以下內容通過JSON提取Reddit內容並將其放置在相應的位置。我自己的迷你書籤。現在你可以看到URL從/ r/images中拉出。我希望能夠在輸入框中鍵入「buildapcsales」，並使用從/ r/buildapcsales reddit中抽取的腳本重新加載頁面的這一部分。Onclick更改腳本標記內的函數

我似乎無法找到一種方法來更改腳本的內容或任何其他解決方法。我試圖創建多個文件並將它們加載到on.click，但是不可能有一個腳本已經構建，以匹配某人在輸入框中輸入的每個可能的結果。

有沒有辦法編輯HTML on-page on.click的內容？或通過輸入框？我沒有發現通過我的在線研究證明這是可能的。

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

感謝提前任何建議！

來源

2016-07-10 David Washburn

我希望能夠在輸入框中鍵入「buildapcsales」，並使用從/ 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 
    }); 
});

是否有編輯HTML的頁面on.click的內容呢？或通過輸入框？我沒有發現通過我的在線研究證明這是可能的。

當然這是可能的。否則，像Stack Overflow，Gmail，Google Maps，Facebook這樣的網站幾乎都是不可能的。不確定你在找什麼，但這裏的關鍵詞是「DOM操作」。 DOM是文檔對象模型...它是代表頁面的樹形結構。通過修改元素，您可以在頁面上控制它們。

您需要將您的想法從「將HTML元素編寫爲格式化指令」轉換爲「編寫HTML，將其解釋並加載爲樹的元素」。一旦你以這種方式看到它，你就不會擔心將數據串聯到標籤中。你只需要編輯這些標籤的屬性。這應該讓你開始：

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

如果您連接文本HTML的情況下，它會被解釋爲HTML是不是你想要的所有東西。想象一下，有人創建了一個標題爲<script src="somethingEvil.js"></script>的帖子。這是設置元素屬性和文本至關重要的原因之一。

來源

2016-07-10 05:35:43 Brad

嗨布拉德，謝謝你的非常詳細的職位。這是非常有用的，我現在可以看到用戶輸入更改reddit URL的邏輯。一個簡單的問題：我已經創建了一個名爲「subreddit」的輸入，如您的示例所示。我也在我的頁面上放置了我的

相關問題

Onclick更改腳本標記內的函數

回答

相關問題