Javascript - 在点击给定的 class 后显示一个给定的 class 的 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>会显示一个包含相同 class 的 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

寻找这样的东西？

Answer 2

由于标记了 JQuery，因此需要注意的是只有跨度的第二个 class 名称将用于在下面的代码中查找具有相同类的 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 语法。 但是在一个跨度中只有一个 class 的情况下，它将不起作用。 因此相应地修改代码或确保 span 的第二个 class 等于您要显示的 div 的类名。

Answer 3

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