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

【问题标题】：Change link by checking a radio button通过选中单选按钮更改链接
【发布时间】：2018-09-13 14:46:22
【问题描述】：

我必须修改<meta property="og:url" content="http://a42de5e.contato.site/agradecimento">

<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”尝试了一些东西，但我不确定是否可行，因为它是一个元标记

【问题讨论】：

您可以修改该标签的答案很好 - 但它会产生任何效果吗？ meta 标签是浏览器的指令；浏览器会对更改采取行动，还是仅在加载时有效？ open-graph 协议主要用于搜索引擎和链接预览，从“at-rest”页面读取；当人类正在查看页面时，更改 og:url 会产生任何影响吗？（除非您将其持久化回服务器）og:url 特别是 "The canonical URL of your object that will be used as its permanent ID in the graph" — 更改它有意义吗？
这看起来像 XY 问题。你能写出为什么你需要改变那个元标记吗？

标签： javascript html css

【解决方案1】：

通过给指定的meta 标记一个ID 和input[type="checkbox"] 元素一个ID，您可以实现您的目标。

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

在 sn-p 中，我给meta 标记一个id="opengraph"，给input[type="checkbox"] 一个id="toggle"。

// 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 方法。

希望我把你推得更远。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

是的，元标记也可以。在这里，我使用常规的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>

【讨论】：

【解决方案4】：

我想你想改变元素值，对吧？

<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>

【讨论】：