Question

在用户将URL放入输入中之后，我想设置my_job.status = true unless my_job.jobdetails.find_by(status: false)，已经尝试了许多我在这里找到的示例，但这些示例均无效...

data-id

//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('https://imgur.com/', '');
  document.getElementById('resultado').innerHTML = novaURL;
  imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
}

<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>  <input type="text" id="txtURL"> <input onclick="getUrl()" type="submit"> <h3 id="resultado">Resultado:</h3> <blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id=""> </blockquote>应该为data-id，我在控制台中看到错误SPrSZV7，为什么它为null？

Answer 1

正在发生的情况是imgur嵌入库正在加载并用blockquote覆盖iframe，因此ID中的"imagem"在{{ 1}}加载到位。尝试用具有iframe属性的blockquote容器包装div，然后在此处设置data-id值以供参考。或者，您可以尝试引用发生嵌入时出现的imgur data ID：iframe而不是使用'imgur-embed-iframe-pub-'包装器。请参见以下示例：

div

//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
  var txt = document.getElementById('txtURL').value;
  var novaURL = txt.replace('https://imgur.com/', '');
  document.getElementById('resultado').innerHTML = novaURL;
  var imagem = document.getElementById('container-for-imgur');
  imagem.dataset.id = novaURL;
  console.log(imagem.dataset.id);
}

Answer 2

为什么这个为空？

因为您在正文代码之前传递了JS代码？

使用数据集=> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

document.getElementById('imagem').dataset.id = novaURL;

备注：没有返回值，所以不要使用imagem =

Answer 3

您的代码有效。您可以在检查中看到data属性已正确设置。您一定遇到了脚本加载问题，其中在脚本执行之前未加载内容DOM。

    //https://imgur.com/SPrSZV7 im trying with this url
    function getUrl() {
        var txt = document.getElementById('txtURL').value;
        var novaURL = txt.replace('https://imgur.com/', '');
        document.getElementById('resultado').innerHTML = novaURL;
        imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
    }

<input type="text" id="txtURL">
    <input onclick="getUrl()" type="submit">
    <h3 id="resultado">Resultado:</h3>
    <blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
    </blockquote>

如何在JavaScript中设置数据ID？

3 个答案: