javascript 获取被点击的元素的类(this？)并将其应用于另一个元素(target)，同时删除目标元素上的所有类

qzlgjiam 于 4个月前发布在 Java

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

找到了很多关于将类添加到点击的东西上的信息，但没有找到如何应用到其他东西上的信息。我有一个列表。每个列表项都有一个唯一的类。当我点击任何列表项时，我想获取类名并将其应用到元素上，同时删除元素上的任何类。我想在没有JQuery的情况下做到这一点。
这是我的脚手架，我不知道从哪里开始.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="typeface-alegreya">
            Alegreya
        </li>
        <li class="typeface-alegreya-sans">
            Alegreya Sans
        </li>
        <li class="typeface-archivo">
            Archivo
        </li>
        <li class="typeface-archivo-narrow">
            Archivo Narrow
        </li>
    </ul>
    <main class="typeface-chivo">The density of texture in a written or typeset page is called its color. This has nothing to do with red or green ink; it refers only to the darkness or blackness of the letterforms in mass. Once the demands of legibilty and logical order are satisfied, eveness of color is the typographer's normal aim. And color depends on four things: the design of the type, the spacing between the letters, the spacing between the words, and the spacing between the lines. None is independent of the others.
    </main>

    <script>
        const fontList = document.querySelectorAll('li');
        const fontApply = document.querySelector('main');
        
        fontList.addEventListener("click", () => {

            // get class of clicked li
            // remove class from target (main)
            // apply class to target (main)

            dialogFonts.close();
        });
    </script>
</body>

</html>

字符串

JavaScript

来源：https://stackoverflow.com/questions/77740299/get-class-of-the-element-thats-clicked-this-and-apply-it-to-another-element

2条答案

按热度按时间

zi8p0yeb1#

首先，addEventListener()不是一个可以在querySelectorAll()返回的NodeList上调用的方法。
您可以考虑使用forEach() method循环遍历从querySelectorAll()返回的每个元素对象，然后分别调用它们的addEventListener()方法。
有了这个问题，我们可以通过将<main>元素的className属性设置为空字符串来清除<main>元素中的所有类：

fontApply.className = "";

字符串
要从点击的<li>中复制类，首先我们应该在事件侦听器函数中获取对点击的<li>的引用。我们可以从传递给函数的event对象中获取：

li.addEventListener("click", (event) => {

型
这个对象的一个属性是target属性，它：
[...]是对事件被调度到的对象的引用。
我们可以从event.target引用的对象中收集类，并将其应用于fontApply（<main>元素对象引用）：

fontApply.classList.add(event.target.className);

型
完整示例：

const dialogFonts = { close: () => {} };

const fontList = document.querySelectorAll("li");
const fontApply = document.querySelector("main");

fontList.forEach((li) => {
  li.addEventListener("click", (event) => {
    fontApply.className = "";
    fontApply.classList.add(event.target.className);

    dialogFonts.close();
  });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li class="typeface-alegreya">Alegreya</li>
      <li class="typeface-alegreya-sans">Alegreya Sans</li>
      <li class="typeface-archivo">Archivo</li>
      <li class="typeface-archivo-narrow">Archivo Narrow</li>
    </ul>
    <main class="typeface-chivo">
      The density of texture in a written or typeset page is called its color.
      This has nothing to do with red or green ink; it refers only to the
      darkness or blackness of the letterforms in mass. Once the demands of
      legibilty and logical order are satisfied, eveness of color is the
      typographer's normal aim. And color depends on four things: the design of
      the type, the spacing between the letters, the spacing between the words,
      and the spacing between the lines. None is independent of the others.
    </main>
  </body>
</html>

赞(0）回复(0）举报 4个月前

bhmjp9jg2#

你的问题不是很清楚你到底想做什么。如果你想得到点击的li，你可以使用事件目标，如果你想得到className，你可以使用elem.className（）。要添加一个特定的类并删除所有其他类，你可以使用elem.setAttribute（'class'，'classname '）。

const main = document.querySelector('.typeface-chivo')
fontList.forEach((li)=>{li.addEventListener("click", (e) => {
    let ckickedLi = e.target    
    let className = e.target.className; // or let className = clickedLi.className
    clickedLi.setAttribute('class', 'theClassYouWant');
    main.classList.add('.className')
})
})

字符串
希望这对你有帮助

赞(0）回复(0）举报 4个月前

我来回答

javascript 获取被点击的元素的类(this？)并将其应用于另一个元素(target)，同时删除目标元素上的所有类

2条答案

相关问题

热门标签

最新问答