在 Javascript 中将字符串变量传递给函数参数

Question

我在网页上有十几个要合并的触发字段。我正在尝试将 'data-target' 属性添加到具有事件侦听器的 HTML 标签，该事件侦听器将对应于目标 dom 对象以显示何时selected.

var target = this.getAttribute('data-target');

document.querySelector('#${target}');

在这种情况下，我想 select 具有与变量的数据目标相匹配的 ID 的 dom 对象。是否可以在 Javascript 中使用这样的字符串文字？

schedule_yes.addEventListener('focus', handleReveal);

function handleReveal(target){
    var target = this.getAttribute('data-target');
    console.log(target);
    let what_date = document.querySelector('#${target}');
    console.log(what_date);


<input class="form-check-input check" type="radio" name="is_schedule" id="schedule_yes" data-target="schedule_date"/>

Answer 1

使用模板文字代替单引号：

function handleReveal(target){
  var target = this.getAttribute('data-target');
  console.log(target);
  var what_date = document.querySelector(`#${target}`);
  console.log(what_date);
}

Answer 2

将您的参数命名为 target 只是为了在您的函数中覆盖它没有任何意义。此外，为了访问数据属性，DOM 元素具有专门为此目的设计的 dataset 属性。

这是干净的版本：

function handleReveal(){
  const { target } = this.dataset;
  // same as: const target = this.dataset.target;
  // same as: const target = this.getAttribute('data-target');
  console.log(target);
  const what_date = document.getElementById(target);
  console.log(what_date);
}


schedule_yes.addEventListener('focus', handleReveal);

<input class="form-check-input check" type="radio" name="is_schedule" id="schedule_yes" data-target="schedule_date"/>

<div id="schedule_date">The TARGET</div>

在 Javascript 中将字符串变量传递给函数参数

Passing a string variable into a function parameter in Javascript

javascript

string-literals