Question

我必须修改<meta property="og:url" content="http://a42de5e.contato.site/agradecimento"> <-当某人在单选按钮中选中“是”时，我可以使用JavaScript进行任何操作吗？

<div class="form-group">

  <h4 class="control-label" data-selector="h4">Would you support us?</h4>

  <label class="radio-inline"><input type="radio" name="Yes" value="Yes">Sim</label>
  <label class="radio-inline"><input type="radio" name="No" value="No ">Não</label>

</div>

我尝试使用“ getElementByID”进行操作，但由于它是一个元标记，因此不确定是否可以实现

Answer 1

不确定是否需要常用的JavaScript答案，但是在jquery中，您可能可以执行类似$("meta[property='og\\:url']").attr("content", "your desired string");的操作来动态更改内容

Answer 2

是的，也可以使用meta标签。在这里，我使用常规的getElementById获取必要的元素，使用setAttribute和getAttribute进行具有元值的操作。我还登录了控制台，对content属性的旧值和新值进行了更改，以确保更改：

<!DOCTYPE html>
<html>
<head>
  <meta id="meta" property="og:url" content="http://a42de5e.contato.site/agradecimento">
</head>
<body>
  <div class="form-group">
    <h4 class="control-label" data-selector="h4">Would you support us?</h4>
    <label class="radio-inline">
      <input id="yes" type="radio" name="Yes" value="Yes">
      Sim
    </label>
    <label class="radio-inline">
      <input id="no" type="radio" name="No" value="No">
      Não
    </label>
  </div>

  <script>
    const el = document.getElementById('yes');
    const meta = document.getElementById("meta");
    el.onclick = function() {
      if (this.checked) {
        console.log('Old meta content: ' + meta.getAttribute("content"));
        meta.setAttribute("content", "NEW_META_CONTENT");
        console.log('New meta content: ' + meta.getAttribute("content"));
      }
    }
  </script>
</body>
</html>

Answer 3

我认为您想更改元素值，对吧？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta id="ogurl" property="og:url" content="http://a42de5e.contato.site/agradecimento">

</head>
<body>
<div class="form-group">

  <h4 class="control-label" data-selector="h4">Would you support us?</h4>

  <label class="radio-inline"><input type="radio" name="change" value="Y">Sim</label>
  <label class="radio-inline"><input type="radio" name="change" value="N">Não</label>

</div>

<script>
$(function() {
  
  $('input[name=change]').change(function() {
    if(this.value === 'Y') {  document.getElementById("ogurl").setAttribute("content", "http://google.com");
    console.log(document.getElementById("ogurl"));
    }

  })
  
});
</script>
</body>
</html>

Answer 4

通过为指定的meta标签赋予ID和input[type="checkbox"]元素ID，您可以实现目标。

在我的回答中，meta标签的内容是根据input[type="checkbox"]状态设置的：如果选中，则将新的url设置为content属性，否则，如果未选中，则退回到meta标签的初始内容。

在摘要中，我给id="opengraph"标签添加了meta，并给id="toggle"添加了input[type="checkbox"]。

// declaring  variables so we make our task easier.

/**
* referencing the 'meta' tag by the 'og' variable.
* referencing the 'checkbox' tag by the 'toggle' variable.
* the 'oldOG' variable stores the initial content of the 'meta' tag, so when the 'checkbox' gets unchecked the initial content is set to the 'meta' tag.
* the 'newOG' variable stores the new content(url), change it per your requirements.
**/
var og = document.getElementById('opengraph'),
    toggle = document.getElementById('toggle'),
    oldOG = og.getAttribute('content'),
    newOG = 'add your new link here';
// adding a change event listener to the 'checkbox', and alter the content of the 'meta' tag based on the 'checkbox' state(if checked => newOG is set, if unchecked => the initial content(oldOG) is set).
toggle.addEventListener('change', function() {
  og.setAttribute('content', (this.checked === true) ? newOG:oldOG);
  
  // just for the demo, remove the next line in production phase.
  console.log('content: ' + og.getAttribute('content'));
});

<meta id="opengraph" property="og:url" content="http://a42de5e.contato.site/agradecimento">
<span>toggle the meta tag's content<input type="checkbox" id="toggle" /></span>

以下是一些有用的链接：

Learn more关于addEventListener方法。

Learn more关于change事件。

Learn more关于getElementById方法。

Learn more关于getAttribute方法。

Learn more关于setAttribute方法。

希望我进一步推动了你。

通过选中单选按钮更改链接

4 个答案: