Я хотел бы восстановить идентификатор и вставить его в несколько SRC, чтобы избежать повторения - PullRequest
Новая
       7

Я хотел бы восстановить идентификатор и вставить его в несколько SRC, чтобы избежать повторения

0 голосов
/ 01 марта 2019

Я хочу получить "id" из каждого поста, чтобы использовать его в различных местах внутри поста.
Как мне этого добиться? 

$("a").attr("onclick", function() {
  return "changeVideo('" + this.id + "')";
});
$("video").attr("src", function() {
  return "https://WebSite" + this.id + "-.jpg";
});
$("video").attr("src", function() {
  return "https://WebSite" + this.id + "-preview.mp4";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>

<div title="First Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
  <a onclick="changeVideo('[Retrieve the id from the first post div]')">
    <div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
      <video muted poster="retrieve the id from the first post div" onmouseover="this.play()" onmouseout="this.pause()">
        <source src="retrieve the id from the first post div" type="video/mp4">
        Your browser does not support HTML5 video.
      </video>
    </div>
  </a>
</div>

<h2>second post</h2>

<div title="Second Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
  <a onclick="changeVideo('[retrieve the id from the second post div]')">
    <div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
      <video muted poster="retrieve the id from the second post div" onmouseover="this.play()" onmouseout="this.pause()">
        <source src="retrieve the id from the second post div" type="video/mp4">
        Your browser does not support HTML5 video.
      </video>
    </div>
  </a>
</div>

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Я думаю, что ключевой момент здесь состоит в том, чтобы перебрать все .post ... И для каждого есть 3 атрибута.

См. Комментарии в коде. 

// Loop through each post
$(".post").each(function(){
  
  // Get the id
  var id = $(this).data("id");
  
  // Set the anchor's onclick
  $(this).find("a").attr("onclick","changeVideo('" + id + "');");
  
  // Set the poster and src
  $(this).find("video").attr({
    "poster":"https://WebSite" + id + "-.jpg",
    "src":"https://WebSite" + id + "-preview.mp4"
  });
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
  <a onclick="">
    <div class="thumb">
      <video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
        Your browser does not support HTML5 video.
      </video>
    </div>
  </a>
</div>

<h2>second post</h2>
<div class="post" title="Second Post" data-id="A-DIFFERENT-ID-FOR-FUN">
  <a onclick="">
    <div class="thumb">
      <video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
        Your browser does not support HTML5 video.
      </video>
    </div>
  </a>
</div>

Требуемый id находится в атрибуте data- в разметке элемента .post.Он также является родителем элемента, который вы хотите «обновить» ... Так что это хорошая отправная точка для получения id и .find() потомков.Цикл .each() - лучший способ правильно их обработать.

0 голосов
/ 01 марта 2019

В ваших функциях this относится к элементу, к которому вы привязали функцию.
Вот демонстрация: 

$("video").attr("poster", function() {
  console.log("This refers to: " + this);
  console.log(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video></video>

Но похоже, что вы хотите получить атрибут id из содержащего <div> для каждого сообщения.

  1. Я предлагаю вам назначить каждому сообщению <div> класс «post».
    Затем вы можете выбрать нужный пост из своих функций, используя jQuery's closest(). 

    <div class="post" ... >

  2. Я рекомендую использовать атрибут данных , такой как data-id, а не id,
    , поскольку атрибут id имеет свой собственный специального назначения . 

    <div class="post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677" ... >

  3. Я рекомендую удалить элементы <a> и привязать обработчик click непосредственно к элементам .thumb.Таким образом, вы упрощаете структуру HTML и вам не нужны встроенные атрибуты onclick="".

Вот рабочий пример: 

$("video").attr({
  'poster': function() {
    var id = $(this).closest('.post').data('id');
    return "https://WebSite" + id + "-.jpg";
  },
  'src': function() {
    var id = $(this).closest('.post').data('id');
    return "https://WebSite" + id + "-preview.mp4";
  }
});

$(".thumb").on('click', function(e) {
  e.preventDefault();
  var id = $(this).closest('.post').data('id');
  changeVideo(id);
});

function changeVideo(id) {
  console.log('Changing Video: ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
  <div class="thumb">
    <video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
        Your browser does not support HTML5 video.
      </video>
  </div>
</div>

<h2>second post</h2>
<div class="post" title="Second Post" data-id="a-different-video-id">
  <div class="thumb">
    <video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
        Your browser does not support HTML5 video.
      </video>
  </div>
</div>

В результате получается такая структура: 

<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
  <div class="thumb">
    <video muted="" poster="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-.jpg" onmouseover="this.play()" onmouseout="this.pause()" src="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-preview.mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
</div>

И jQuery привязал обработчик click к каждому .thumb,который передаст соответствующий data-id в функцию changeVideo().

...