Javascript - 单击给定类后显示具有给定类的 div答案

【问题标题】：Javascript - Show a div with a given class after clicking on a given classJavascript - 单击给定类后显示具有给定类的 div
【发布时间】：2022-02-07 19:00:07
【问题描述】：

具有特定类的几个跨度。

<span class="1 click-1">1</span>
<span class="2 click-2">2</span>
<span class="3 click-3">4</span>
<span class="4 click-4">4</span>

单击给定的<span> 会显示一个包含相同类的DIV。怎么做？

<div class="click-1">Hello!</div>
<div class="click-2">Hello 2!</div>
<div class="click-3">Hello 3!</div>
<div class="click-4">Hello 4!</div>

我需要这样的解决方案，因为它是 CMS 方面的开发。用户可以添加更多的 span 和 div。所以脚本必须是通用的。

【问题讨论】：

div 已经可见。为什么要再次展示它们？或者您想显示相关的 div 并隐藏其余部分？
您没有帮助自己处理语义类名称。给他们all一个类，这样你就可以做$(".clickable").hide()，然后给他们一对data-id=（不是id=），然后给他们$(".clickable").hide();$(".clickable[data-id=" + $(this).data(id) + "]").show()，否则你必须做乏味的（并且容易出错）类解析。

标签： javascript html jquery

【解决方案1】：

寻找这样的东西？

document.querySelectorAll("span").forEach(e => {
  e.onclick = () => {                          // on click on span
    const div = document.createElement("div"); // create new div
    div.classList = e.classList;               // copy and reuse class list
    div.innerText = `Hello ${e.innerText}!`;   // set inner text to 'Hello ${}!'
    document.body.append(div);                 // append div to dom
  }
})

span {
  display: block;
}

<span class="1 click-1">1</span>
<span class="2 click-2">2</span>
<span class="3 click-3">4</span>
<span class="4 click-4">4</span>
Clicking on a given <span> displays a DIV that contains the same class. How to do it?

【讨论】：

我认为您对所提供的 sample 的理解过于字面化了。 DIV 更有可能是使用 实际内容 预先创建的，而不是使用“hello”生成的。

【解决方案2】：

由于标记了 JQuery，需要注意的是，在下面的代码中，只有 span 的第二个类名将用于查找具有相同类的 div。

$(document).on("click","span",function(){// attaching evt listner to all spans
  var getClass = $(this).prop('class').split(' ')[1];//get 2nd classname of span
    $(`div.${getClass}`).show(); // divs with such class
    //or
    $(`.${getClass}`).show(); // anything with such class
});

此代码将使用上面给出的 html 语法。但是如果一个跨度中只有一个类，那么它将不起作用。因此，相应地修改代码或确保 span 的第二类等于您要显示的 div 的类名。

【讨论】：

【解决方案3】：

var testElements = document.getElementsByClassName('click-1');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
  return testElement.nodeName === 'DIV';
});

【讨论】：

不是全局的。
您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。