jQuery-在所有项目上运行keyup函数

凯尔·安德希尔（Kyle Underhill）：

该代码采用一个YouTube网址，并获取该链接的缩略图，并将其缩短。问题是，当我尝试更改代码以使其适用于输入的每个实例时，而不仅仅是链接到ID的一个实例：

目前仅适用于ID为：的输入：

var elemOutput = document.getElementById("thumb_video");

试图更改为classname以便在每个实例上工作：

var elemOutput = document.getElementsByClassName("video__thumb");

如何获得在的每个实例上运行的代码input？

/**
 * Get YouTube ID from various YouTube URL
 * @author: takien
 * @link https://gist.github.com/takien/4077195
 */

function YouTubeGetID(url) {
  var ID = "";
  url = url
    .replace(/(>|<)/gi, "")
    .split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
  if (url[2] !== undefined) {
    ID = url[2].split(/[^0-9a-z_\-]/i);
    ID = ID[0];
  } else {
    ID = url;
  }
  return ID;
}

/**
 *
 */
function getPosterUrl(url) {
  var posterUrl = "https://i.ytimg.com/vi/{videoID}/maxresdefault.jpg";
  var videoID = YouTubeGetID(url);

  posterUrl = posterUrl.replace(/{videoID}/g, videoID);

  return posterUrl;
}

function setPosterUrl(url) {
  var videoID, posterUrl, elemContainer, elemAnker, elemImg;
  var images = [
    /*"maxresdefault.jpg",
    "sddefault.jpg",
    "hqdefault.jpg",
    "mqdefault.jpg",*/
    "default.jpg"
  ];

  videoID = YouTubeGetID(url);

  var elemOutput = document.getElementById("thumb_video");

  elemOutput.innerHTML = "";

  images.forEach(function(item, index) {
    elemContainer = document.createElement("div");
    elemAnker = document.createElement("a");
    elemImg = document.createElement("img");

    posterUrl = "https://i.ytimg.com/vi/" + videoID + "/" + images[index];

    elemAnker.href = posterUrl;
    elemAnker.setAttribute("target", "_blank");
    elemAnker.setAttribute("rel", "noopener");

    elemImg.src = posterUrl;
    elemImg.setAttribute("alt", "");

    elemAnker.appendChild(elemImg);
    elemContainer.appendChild(elemAnker);
    elemOutput.appendChild(elemContainer);
  });
}

$(document).ready(function() {
  var $input = $(".video__input");
  var $icon = $(".video__icon");
  var valLength;

  $input.on("keyup", function(e) {
    var newval = "",
      $this = $(this);

    if ((newval = $this.val().match(/(\?|&)v=([^&#]+)/))) {
      $this.val(newval.pop());
    } else if ((newval = $this.val().match(/(\.be\/)+([^\/]+)/))) {
      $this.val(newval.pop());
    } else if ((newval = $this.val().match(/(\embed\/)+([^\/]+)/))) {
      $this.val(newval.pop().replace("?rel=0", ""));
    }
    e.preventDefault();
    setPosterUrl($input.val());
    $icon.hide();
  });

  $input.on("input", function() {
    valLength = $.trim($(this).val()).length;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <input class="video__input" type="text" placeholder="Video URL">
  <div class="video__thumb" id="thumb_video"></div>
  <div class="video__icon">Test</div>
</div>
<div class="item">
  <input class="video__input" type="text" placeholder="Video URL">
  <div class="video__thumb" id=""></div>
  <div class="video__icon">Test</div>
</div>

该死的：

两件事情：

您必须遍历所有项目，以某种方式知道哪些项目属于同一项目。（请参见代码）var $items = $(".item"); $items.each(function(){ var $input = $(this).children(".video__input"); // .... and more
在setPosterUrl()函数内部，您刚刚从其他地方选择了另一个ID为ID的元素，因此就将其覆盖。现在已更改，因此您可以将元素（普通的javascript元素）传递给您的函数，该函数就是图像占位符...

/**
 * Get YouTube ID from various YouTube URL
 * @author: takien
 * @link https://gist.github.com/takien/4077195
 */

function YouTubeGetID(url) {
  var ID = "";
  url = url
    .replace(/(>|<)/gi, "")
    .split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
  if (url[2] !== undefined) {
    ID = url[2].split(/[^0-9a-z_\-]/i);
    ID = ID[0];
  } else {
    ID = url;
  }
  return ID;
}

/**
 *
 */
function getPosterUrl(url) {
  var posterUrl = "https://i.ytimg.com/vi/{videoID}/maxresdefault.jpg";
  var videoID = YouTubeGetID(url);

  posterUrl = posterUrl.replace(/{videoID}/g, videoID);

  return posterUrl;
}

function setPosterUrl(onThisElement, url) {
  var videoID, posterUrl, elemContainer, elemAnker, elemImg;
  var images = [
    /*"maxresdefault.jpg",
    "sddefault.jpg",
    "hqdefault.jpg",
    "mqdefault.jpg",*/
    "default.jpg"
  ];

  videoID = YouTubeGetID(url);

  var elemOutput = onThisElement;

  elemOutput.innerHTML = "";

  images.forEach(function(item, index) {
    elemContainer = document.createElement("div");
    elemAnker = document.createElement("a");
    elemImg = document.createElement("img");

    posterUrl = "https://i.ytimg.com/vi/" + videoID + "/" + images[index];

    elemAnker.href = posterUrl;
    elemAnker.setAttribute("target", "_blank");
    elemAnker.setAttribute("rel", "noopener");

    elemImg.src = posterUrl;
    elemImg.setAttribute("alt", "");

    elemAnker.appendChild(elemImg);
    elemContainer.appendChild(elemAnker);
    elemOutput.appendChild(elemContainer);
  });
}

$(document).ready(function() {
  var $items = $(".item");

  $items.each(function(){
    var $input = $(this).children(".video__input");
    var $icon = $(this).children(".video__icon");
    var valLength;
  
    $input.on("keyup", function(e) {
      var newval = "",
      $this = $(this);

      if ((newval = $this.val().match(/(\?|&)v=([^&#]+)/))) {
        $this.val(newval.pop());
      } else if ((newval = $this.val().match(/(\.be\/)+([^\/]+)/))) {
        $this.val(newval.pop());
      } else if ((newval = $this.val().match(/(\embed\/)+([^\/]+)/))) {
        $this.val(newval.pop().replace("?rel=0", ""));
      }
      e.preventDefault();
      setPosterUrl($icon[0], $input.val()); // $icon[0] the "[0]" part is only to convert from jQuery element to plain javascript element!
      $icon.hide();
    });

    $input.on("input", function() {
      valLength = $.trim($(this).val()).length;
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <input class="video__input" type="text" placeholder="Video URL">
  <div class="video__thumb" id="thumb_video"></div>
  <div class="video__icon">Test</div>
</div>
<div class="item">
  <input class="video__input" type="text" placeholder="Video URL">
  <div class="video__thumb" id=""></div>
  <div class="video__icon">Test</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。