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

在您的函数中，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>属性。

我建议您为每个帖子<div>分配一个“帖子”类别。
然后，您可以使用jQuery的closest()从函数中选择所需的帖子。
```
<div class="post" ... >
```
我建议您使用data-id之类的data attribute而不是id属性，
因为id属性具有自己的specific purpose。
```
<div class="post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677" ... >
```
我建议删除<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()函数。

Answer 2

我认为这里的关键是要遍历所有 <div class="product alert stock"> <a href="#" data-post="" title="Out of stock" class="action alert">Out of stock</a> </div>  <div class="shipping-product-info"> <div class="ship-clickcollect option--available"> <div class="shipping-product-info--options"> <div class="shipping-product-info--icon"></div> <div class="shipping-product-info--available"></div> <div class="shipcontroller"> <p>Available on orders over $40. Collection in 1-7 days. WA orders 1-14 days. <a href="/click-and-collect" target="_blank">More info »</a></p> </div> </div> </div> <div class="ship-homedelivery option--not-available"> <div class="shipping-product-info--options"> <div class="shipping-product-info--icon"></div> <div class="shipping-product-info--available"></div> <div class="shipcontroller"> <p>Free express shipping over $99. Some exclusions apply. <a href="/free-shipping-australia-wide">More info »</a></p> </div> </div> </div> </div> ...，并为每个属性设置3个属性。

查看代码中的注释。

.post

// 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和.find()子元素的一个很好的起点。 .each()循环是正确处理它们的最佳方法。

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

2 个答案: