Вопросы Теги

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

Если переменная var вводится пользователем, eval не следует использовать для расширения тильды с использованием 

eval var=$var  # Do not use this!

. Причина в том, что пользователь может случайно (или по назначению ) типа var="$(rm -rf $HOME/)" с возможными катастрофическими последствиями.

Лучшим (и безопасным) способом является использование расширения параметра Bash: 

var="${var/#\~/$HOME}"
-1
задан showdev 1 March 2019 в 02:38
поделиться

2 ответа

В ваших функциях 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 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>

Это приводит к такой структуре: [ 1146] 

<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().

0
ответ дан showdev 1 March 2019 в 02:38
поделиться

Я думаю, что ключевой момент здесь состоит в том, чтобы перебрать все .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- в [ 115] разметка элемента. Он также является родителем элемента, который вы хотите «обновить» ... Так что это хорошая отправная точка для получения id и .find() потомков. Цикл .each() - лучший способ правильно их обработать.

0
ответ дан Louys Patrice Bessette 1 March 2019 в 02:38
поделиться
Другие вопросы по тегам:

Похожие вопросы: