Блог

Главная - Вопросы по программированию - jQuery — Запустить функцию keyup для всех элементов

jQuery — Запустить функцию keyup для всех элементов

#javascript #jquery

#javascript #jquery

Вопрос:

Код принимает URL youtube, получает миниатюру ссылки и сокращает ее. Проблема в том, что когда я пытаюсь изменить код, чтобы он работал для каждого экземпляра входных данных, а не только для одного экземпляра, поскольку он связан с идентификатором:

В настоящее время работает только над вводом с идентификатором:

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(/(?|amp;)v=([^amp;#] )/))) {
      $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>

Ответ №1:

Две вещи:

  1. вы должны перебрать все элементы, которые у вас есть, чтобы каким-то образом узнать, какие принадлежат друг другу. (смотрите код) var $items = $(".item"); $items.each(function(){ var $input = $(this).children(".video__input"); // .... and more

  2. внутри setPosterUrl() функции вы просто выбрали другой элемент с идентификатором из ниоткуда, а затем просто перезаписали его. Теперь это изменено, так что вы можете передать элемент (обычный элемент 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(/(?|amp;)v=([^amp;#] )/))) {
        $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>