第二次点击javascript中的按钮时，如何删除function效果？ [复制]

Question

这个问题在这里已经有了答案：

如何在单击按钮时为网站上的所有链接添加下划线？ （2 个答案）

2 年前关闭。

也许你们中的一个可以帮助我。 我在 javascript 中编写了一个功能，为所有“a”选择器添加了下划线。 使用“onclick”属性调用 function。 我想反转效果，即在第二次单击同一按钮时删除下划线。 问题是怎么做？

HTML 代码：

<button type="button" class="underlineLinks" id="underlineLinks" onclick="underlineLinks()">Click</button>

JS代码：

function underlineLinks() {
    const links = document.querySelectorAll("a");
    links.forEach(a => a.style.textDecoration = "underline");
}

Answer 1

你可以创建一个带有装饰下划线的 CSS class

.class
{
    text-decoration: underline
}

并在 JS 中使用切换。

Toggle 将添加 class（如果它未应用于您的链接）并删除 class（如果它应用于您的链接）

function underlineLinks() {
    const links = document.querySelectorAll("a");
    links.forEach(a => a.classList.toggle("class"));
}

https://jsfiddle.net/u4sxfdy5/

Answer 2

你可以这样做

function getUnderLineLinksSetter() {
  let areLinksUnderlines = false;
  return () => {
    const links = document.querySelectorAll('a');
    areLinksUnderlines = !areLinksUnderlines;
    links.forEach(a => {
      if (areLinksUnderlines) {
        a.style.textDecoration = 'initial';
      } else {
        a.style.textDecoration = 'underline';
      }
    });
  };
}

然后使用以下 html

<button type="button" class="underlineLinks" id="underlineLinks" onclick="getUnderLineLinksSetter()()">Click</button>

最好从代码中添加事件侦听器而不是使用 html 内联函数，我的意思是不是使用 html 设置点击，而是使用 javascript 像这样设置它

// put this code inside a load event in the page so you make sure the button is in the dom
function getUnderLineLinksSetter() {
  let areLinksUnderlines = false;
  return () => {
    const links = document.querySelectorAll('a');
    areLinksUnderlines = !areLinksUnderlines;
    links.forEach(a => {
      if (areLinksUnderlines) {
        a.style.textDecoration = 'initial';
      } else {
        a.style.textDecoration = 'underline';
      }
    });
  };
}


document.getElementById('underlineLinks').addEventLisetner('click', getUnderLineLinksSetter())

然后从 html 中删除 onclick

<button type="button" class="underlineLinks" id="underlineLinks">Click</button>

Answer 3

function underlineLinks() {
    const links = document.querySelectorAll("a");
    var toChange = "underline"
    if(links[0].style.textDecoration != "underline")) toChange = "none"
    links.forEach(a => a.style.textDecoration = toChange);
}

可能有更简单的方法，但 idk，我开枪了