javascript 如何将document.querySelector作为变量传递？

luaexgnf 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(183)

为了应用DRY原则，我的代码中有很多document.querySelector，并且我创建了一个这样的函数。

const documentQuerySelector = (tag, method, message) => {
  document.querySelector(`.${tag}`)`.${method}`= message;
};

现在，当我这样调用函数时：

documentQuerySelector('message', '.textContent', '⛔️ No Number!');

类为“message”的HTML文本的文本内容不会更改为“️No Number！”
问题在于方法。当我将“.textContent”传入函数，并在文档查询选择器document.querySelector（.${tag}）.${method} = message中使用它时，它无法识别.${method}。我之所以知道这是问题所在，是因为当我使用相同的函数并将其放入“.textContent”时，它工作得很好。如何将该属性作为变量传递，以及如何在document.querySelector中使用它？
谢谢
我尝试将其作为模板文字传递，但没有成功。

JavaScript

来源：https://stackoverflow.com/questions/76230897/how-do-i-pass-a-document-queryselector-proper-as-a-variable

2条答案

按热度按时间

nwsw7zdq1#

不知道它是如何干燥，因为你基本上是重复同样的事情，只是在不同的格式，但你需要使用括号符号使用动态属性。所以你的代码看起来像这样：

const documentQuerySelector = (selector, property, value) => {
  document.querySelector(selector)[property] = value;
};

documentQuerySelector('.message', 'textContent', '⛔️ No Number!');

<div class="message"></div>

赞(0）回复(0）举报 2023-05-12

6pp0gazn2#

你想要太多的DRY在这里牺牲了灵活性和可理解性。另外，函数名并不意味着在找到的元素上有一些操作。动作本身就是一个属性设置器。那方法呢如果你看得更近，你会发现你在这里也没有保存太多的输入。其他程序员也应该学习如何处理你的函数。所以我的结论是--使用document.querySelector()，它更干净，更必要。

document.querySelector('.message').textContent = '⛔️ No Number!';

如果你想保存你的输入-使用jQuery，我认为它在2023年仍然有效，几乎每个人都会很容易理解你的代码：

$('.message').text('⛔️ No Number!');

如果你对同一个元素调用querySelector多次，你可以在这里做一些DRY，并将元素保存在一个变量中：

const elMessage = document.querySelector('.message');

  elMessage.textContent = '⛔️ No Number!';
  // some other code
  elMessage.classList.toggle('visible', isMessageVisible);

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何将document.querySelector作为变量传递？

2条答案

相关问题

热门标签

最新问答