javascript - foreach 循环中的 jQuery addClass

Question

我有一些带有触发器和内容 div 的 foreach 循环。目的是点击触发器，然后 addClass 到内容 div，使其在屏幕上可见。

foreach 标记

<?php foreach( $posts as $post ) : ?>

    <a class="slide-trigger" href="#loc<?php echo $post->ID;?>"><?php the_title(); ?></a>

    <span> 

    <?php 

    $speakers = get_field('speakers');

    ?>
    <?php if( $speakers ): ?>
        <ul class="flat">
        <?php foreach( $speakers as $speaker ): ?>
            <li>
                <a href="<?php echo get_permalink( $speaker->ID ); ?>">
                    <?php echo get_the_title( $speaker->ID ); ?>
                </a>
            </li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>

    </span>

    <div class="slide" id="loc<?php echo $post->ID;?>">

        <div class="close"></div>       
        <?php echo $post->post_title;?>
        <?php echo $post->post_content;?>

    </div>

<?php endforeach; ?>

jQuery

$(".slide-toggle[href^='#loc']").click(function(e){
    e.preventDefault();
    $(".slide[id^='loc']").addClass("open");
})

$(".close").click(function(){
    $(".slide").removeClass("open");
});

我正在寻找的是每个 slide-toggle 来触发它的 slide。

有什么想法吗？

Answer 1

ID在href里面，抓取它去掉#loc前缀，就可以选择对应的slide打开了。同样，这样就不再需要 startsWith 选择器。

$(".slide-toggle[href^='#loc']").click(function(e){
    e.preventDefault();
    $(".slide[id='loc" + this.href.replace('#loc', '') + "']").addClass("open");
})

---

必须解析出 ID，然后像这样连接似乎有点老套。使用 data-* 属性会更好。

链接:

<a class="slide-trigger" data-id="<?php echo $post->ID;?>" href="#loc<?php echo $post->ID;?>"><?php the_title(); ?></a>

幻灯片:

<div class="slide" data-id="<?php echo $post->ID;?>" id="loc<?php echo $post->ID;?>">

jQuery:

$(".slide-toggle[data-id]").click(function(e){
    e.preventDefault();
    $(".slide[data-id=" + $(this).data('id') + "]").addClass("open");
})