jQuery

Question

在我的应用程序中，我使用 $.get 和 yahoo APIs 来获取 open gragh/og: title & description 来自用户的捐赠 URL。

作为snippet blow，或者你可以访问jsfiddle snippet

$('#get-social-data-from-url').keyup(function(){
  var query = 'select * from html where url="' + $('input').val() + '" and xpath="*"';
  var url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);

  $.get(url, function(data) {
    var html = $(data).find('html');
    $('#title').val(html.find("meta[property='og:title']").attr('content') || 'no title found');
    $('#description').val(html.find("meta[property='og:description']").attr('content') || 'no description found');
  });
});

input{
  width:90%;
  height:50px;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="one">
    <!-- Paste this link here:
    http://www.lifedaily.com/firefighters-help-pregnant-mom-who-lost-everything-in-a-fire/
    -->
    <input type="text" id="get-social-data-from-url" placeholder="Paste your link here">  
  </div>

  <div class="two">
    <lable>Title</lable>
    <input type="text" id="title" placeholder="title">
  
    <label>Description</label>
    <input type="text" id="description" placeholder="description">
  </div>
</div>

这个函数在只有一个 form 时工作正常。我的应用程序是一个动态应用程序，在一个页面中我有多次相同的 form （用户想要添加的次数）

所以我的 form 看起来像这样 jsfiddle snippet & 每个 input##get-social-data-from-url 都会有 不同的 link 并且什么都不会work/work正确。

现在我可以使用 data- 来 select 更正 inputs 并且效果很好，但由于某些原因，我无法获得 og: title & description 我得到 No title found.

我现在是这样做的：

$(function () {
    var fileFieldId;
    var query;
    var url;
    $(".get-social-data-from-url").keyup(function () {
        fileFieldId = $(this).attr('id');
        query = 'select * from html where url="' + $('input').val() + '" and xpath="*"';
        url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);

        $.get(url, function(data) {
          var html = $(data).find('html');
          $("input.post-title-create[data-title-id='" + fileFieldId + "']" ).val(html.find("meta[property='og:title']").attr('content') || 'no title found');

          $("textarea.post-description-create[data-description-id='" + fileFieldId + "']" ).val(html.find("meta[property='og:title']").attr('content') || 'no title found');

        });

    });
});

我遇到的唯一问题是，和以前一样，我无法获得正确的 og: 数据。

Answer 1

这是解决问题的方法。首先将 data- 添加到每个具有相同值但不同 data 名称的 input。

例如：

<input class="post-title-create" data-title-id="attributes_1" type="text"  id="attributes_1493294690538_title">

&Javascript代码：

$(function () {
    var fileFieldId;
    var fileFieldVal;
    var fileFieldClass;
    var query;
    var apiUrl;
    $(".get-social-data-from-url").keyup(function () {
        fileFieldId = $(this).attr('id');
        fileFieldClass = $(this).attr('class');
        fileFieldVal = $(this).val();
        query = 'select * from html where url="' + $(this).val() + '" and xpath="*"';
        apiUrl = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);

        $("h4[data-preview-id='" + fileFieldId + "']" ).text('updated');
        $("input.post-link-create[data-link-id='" + fileFieldId + "']" ).val(fileFieldVal);

        $.get(apiUrl, function(data) {
          var html = $(data).find('html');
          $("input.post-title-create[data-title-id='" + fileFieldId + "']" ).val(html.find("meta[property='og:title']").attr('content') || 'no title found');
          $("textarea.post-description-create[data-description-id='" + fileFieldId + "']" ).val(html.find("meta[property='og:description']").attr('content') || 'no title found');
          $("input.post-remote-image-create[data-remoteimg-id='" + fileFieldId + "']" ).val(html.find("meta[property='og:image']").attr('content') || 'no title found');
        });

    });
});

jQuery - 在 closest/nearest DIV 中选择输入并为每个输入添加值

jQuery - Selecting inputs in closest/nearest DIV & add value to each input

html

forms

parent-child

closest