Question

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

功能会像这样运行：

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

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

现在我试图用纯粹的javascript单独做这个，但它开始变得非常混乱和冗长的啰嗦。我想知道jquery api中是否有一个很好的工具来帮助它？

谢谢，

Answer 1

如果我理解你的问题，在jQuery中你可以：

<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();
    })
})

我真的不明白你为什么要使用href属性。

修改：JSFiddle。

编辑：我已经删除了循环，因为没有必要。

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

1 个答案: