如何仅选中类内标题元素？点击事件范围异常排查

你的问题根源有三点：div本身绑定了内联点击事件、选择器写法错误、事件处理逻辑有误，按以下方式修正即可：

1. 移除div上的内联点击事件 #

原代码中每个.post div都加了onclick="updatenext()"，这会导致点击div任意区域都触发操作，直接删除该属性：

<div class="post">
    <h2>Item3</h2>
</div>

<div class="post">
    <h2>Item4</h2>
</div>

2. 修正选择器，绑定h2的点击事件 #

原选择器$(":header.post")写法错误，:header匹配标题元素，但.post是父div的类，正确写法是选中.post下的h2元素：

$(".post h2").on("click", function() {
    // 调整后的逻辑
});

3. 调整事件处理逻辑 #

原代码里$(this).hide()会隐藏h2本身而非父级的.post，且用索引的方式容易出错，直接通过DOM关系操作更可靠：

var $posts = $(".post");
$posts.hide();
$posts.eq(0).show();

$(".post h2").on("click", function() {
    var $currentPost = $(this).closest(".post"); // 获取当前h2的父级.post
    var $nextPost = $currentPost.next(".post"); // 获取下一个.post

    $currentPost.hide();
    if ($nextPost.length) { // 确保存在下一个元素再显示
        $nextPost.show();
    }
});

完整可运行代码 #

<div class="post">
    <h2>Item3</h2>
</div>

<div class="post">
    <h2>Item4</h2>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    var $posts = $(".post");
    $posts.hide();
    $posts.eq(0).show();

    $(".post h2").on("click", function() {
        var $currentPost = $(this).closest(".post");
        var $nextPost = $currentPost.next(".post");
        
        $currentPost.hide();
        $nextPost.length && $nextPost.show();
    });
</script>

修改完成后，只有点击h2标题时才会触发隐藏当前div、显示下一个div的操作，点击div其他区域不会有任何反应。

内容的提问来源于stack exchange，提问作者pnoob