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前缀，然后就可以选择要打开的相应幻灯片了。这样，不再需要startsWith选择器。

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

必须解析ID，然后像这样连接似乎有点hacky。使用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");
})

Answer 2

@MrCode有两个很好的解决方案。 data-id方法更加优雅，与我一起使用。

请注意，$post->ID是一个仅仅作为id= - https://css-tricks.com/ids-cannot-start-with-a-number/工作的数字 - 并且导致了一些事情无法正常工作的问题

答案;按照@ MrCode使用数据属性的方法。它很优雅，在循环中效果很好。

foreach循环中的jQuery addClass

2 个答案: