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

Question

几个有特定类的跨度。

<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。所以剧本必须是通用的。

Answer 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?

​

Answer 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的类名。

Answer 3

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