javascript - 将 click 元素与相应的隐藏项目 div 匹配

Question

我正在用 javascript 编写一个快速函数，它在一组帖子中与 wp 交互，当我单击与其匹配的 href="#element" 对应的元素时，这些帖子被隐藏并显示。

函数会像这样运行：

1）您单击其中一个动态添加的帖子标题，其中它的标签中有帖子标题的 href 值。

2）其下对应的隐藏项目，其id与上面动态添加的元素的href值相匹配，基本显示它并隐藏之前的子项目。

现在我尝试仅使用纯 javascript 来做到这一点，但它开始变得非常混乱和冗长。我想知道 jquery api 中是否有一个很好的工具来帮助解决这个问题？

谢谢，

Answer 1

If I understand your question correctly, in jQuery you could:

<h1 class="buttonHeader" data-divider="#dividerId1">Test</h1>
<h1 class="buttonHeader" data-divider="#dividerId2">Test 2</h1>
<div class="myDivider" id="dividerId1"><p>Content</p></div> <!-- Not sure what href is used for? -->
<div class="myDivider" id="dividerId2"><p>Content 2</p></div>

$(document).ready(function() {
    $('h1.buttonHeader').click(function() {
        // Get data attribute from clicked header
        var correspondingDiv = $(this).attr('data-divider');
        // Hide any open 'myDivider' dividers
        $('.myDivider').hide();
        // Display the corresponding divider
        $(correspondingDiv).show();
    })
})

I don't really understand why you're using the href attribute.

Edit: JSFiddle.

Edit: I've removed the loop as it wasn't necessary.