我想恢复一个id并将其插入几个src，以避免重复

Question

我想从每个帖子中检索“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>

Answer 1

我认为这里的关键是遍历所有的.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()循环是正确处理它们的最佳方式。

Answer 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>一类“帖子”。 然后，您可以使用jQuery的closest()从函数中选择所需的帖子。 <div class="post" ... >
2. 我建议你使用像data attribute这样的data-id而不是id属性， 因为id属性有自己的specific purpose。 <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()函数。