-2

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

函数会像这样运行:

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

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

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

谢谢,

4

1 回答 1

0

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.

于 2013-02-12T12:38:46.327 回答