Question

我有PHP while循环显示此值：

echo "<a href='$video_url' data-vid='$video_id' class='$active'>$video_title</a>";

我有一个HTML iframe：

<iframe height="380" id="yframe" data-video-id="" width="800" src="https://www.youtube.com/embed/xxHmoLvjpLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="margin-top: 30px; float: right; margin-right: 10px; "></iframe>

工作原理：

当我点击每个a链接时，它只获取href值并将其设置为iframe src值。

好了，现在您看到我在data-vid链接中有a值了。

我想，在第一页加载时，第一个data-vid值应设置为iframe data-video-id值。

然后当我点击任意a链接时，相应的data-vid值应设置为iframe data-video-id值。

但不知怎的，它不起作用。

这是我的JS代码：

<script>
$(document).ready(function(){

  var current_vid = $('.vertical-menu a').data("vid");
    $('#yframe').data('video-id', current_vid);

    $(".vertical-menu a").click(function(e) {
        e.preventDefault();
        $("#yframe").attr("src", $(this).attr("href"));
        $('#yframe').data('video-id', $(this).data("vid"));
        $('.vertical-menu a').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
    })
});

$(document).ready(function(){
    $("#next-btn").click(function(){
        $(".vertical-menu a.active").next().trigger("click");
    });
});
</script>

Answer 1

首先，您正在使用jquery来实现此目的。类似的也可以使用普通的旧javascript来完成。

为什么设置attr而不是数据是因为jquery中的attr用于更新/设置DOM元素的属性值。这是一个带有两个参数（属性名称和值）的函数。

以下是使用javascript实现相同功能的方法

var yFrame = document.getElementById("yframe");
yframe.getAttribute("data-video-id"); // Returns the value of the attr
yframe.setAttribute("data-video-id","your data value") // Sets the value of attr

Answer 2

OH，我发现问题是我应该使用attr而不是data设置值。但为什么呢？

以下是代码：

<script>
$(document).ready(function(){

  var current_vid = $('.vertical-menu a').data("vid");
    $('#yframe').attr('data-video-id', current_vid);

    $(".vertical-menu a").click(function(e) {
      e.preventDefault();
      $("#yframe").attr("src", $(this).attr("href"));
      $('#yframe').attr('data-video-id', $(this).data("vid"));
      $('.vertical-menu a').removeClass('active');

      var $this = $(this);
      if (!$this.hasClass('active')) {
          $this.addClass('active');
      }
    })
});

$(document).ready(function(){
    $("#next-btn").click(function(){
        $(".vertical-menu a.active").next().trigger("click");
    });
});
</script>

Answer 3

.data（）将存储与指定元素关联的任意数据和/或返回已设置的值。。 attr（）将获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

查看此article

如何使用Javascript获取数据值并设置新数据值？

3 个答案: