如何用单个JS函数实现3个按钮跳转不同外部网站并整合document属性

实现方案 #

方案1：最小改动现有代码 #

仅调整少量原有代码即可实现单函数处理所有跳转：

调整后HTML代码

<button class="one" data-url="https://www.google.com/" onclick="gotoUrl(this)"> Google </button>
<button class="two" data-url="https://www.yahoo.com/" onclick="gotoUrl(this)"> yahoo </button>
<button class="three" data-url="https://www.youtube.com/" onclick="gotoUrl(this)"> Youtube </button>

调整后JS代码

function gotoUrl(ele) {
  window.location.assign(ele.dataset.url)
}

该方案通过给按钮新增data-url自定义属性存储跳转地址，调用函数时传入当前触发元素，直接读取属性值完成跳转，不需要重复定义多个功能类似的函数。

方案2：整合document属性的更优实现 #

无需给按钮写内联onclick，通过document事件委托实现逻辑，后续新增同类按钮不需要修改JS代码：

调整后HTML代码

<button class="one" data-url="https://www.google.com/"> Google </button>
<button class="two" data-url="https://www.yahoo.com/"> yahoo </button>
<button class="three" data-url="https://www.youtube.com/"> Youtube </button>

调整后JS代码

document.addEventListener('click', function(e) {
  if (e.target.tagName === 'BUTTON' && e.target.dataset.url) {
    window.location.assign(e.target.dataset.url)
  }
})

该方案用到了document的全局事件监听能力，依托事件冒泡机制统一处理所有按钮的点击跳转，代码冗余度更低，可维护性更高。

内容的提问来源于stack exchange，提问作者Ark