在while循环中显示/隐藏功能

Question

我有一个while循环，可以从一些高级自定义字段中吐出数据。

在while循环中，我有一个read more / read less按钮，如果点击它会显示一个额外的字段。

我遇到的问题是没有div的唯一ID，因此当点击read more按钮时，所有部分都会打开，而不仅仅是我选择的部分。

html看起来像这样 -

<?php if(have_rows('features')) : ?>

<div class="features-container">

<?php while(have_rows('features')) : the_row(); ?>

<div class="feature">

    <?php if(get_row_index() % 2 == 0) : ?>
        <div class="feature-image" style="background-image: url('<?php the_sub_field('image'); ?>');">
            <div class="categories-tag-left"><?php the_sub_field('category'); ?></div>
        </div>
    <?php endif; ?>

    <div class="feature-description">
        <div class="featured-description-container">
            <h3><?php the_sub_field('name'); ?></h3>
            <?php the_sub_field('introduction'); ?></br>
            <div class="slidingDiv">
                <?php the_sub_field('more'); ?>
            </div>
            <div class="read-more-button-container">
                <a href="#" class="show_hide tech-read-more-button">Read More</a>
            </div>
        </div>

    </div>

    <?php if(get_row_index() % 2 != 0) : ?>
        <div class="feature-image" style="background-image: url('<?php the_sub_field('image'); ?>');">
            <div class="categories-tag-right"><?php the_sub_field('category'); ?></div>
        </div>
    <?php endif; ?>

</div>

<?php endwhile; ?>

</div>

<?php endif; ?>

我看起来像这样的JavaScript -

$(".slidingDiv").hide();

$('.show_hide').click(function (e) {
    $(".slidingDiv").slideToggle("slow");
    var val = $(this).text() == "Read More" ? "Read Less" : "Read More";
    $(this).hide().text(val).fadeIn("fast");
    e.preventDefault();
});

任何人都可以帮忙解决问题吗？

Answer 1

您知道点击了哪个.show_hide按钮，因为它在处理程序中将是this。因此，您只需找到与该按钮关联的.slidingDiv即可。他们都在.feature-description容器中，因此通过closest和find这是一种相当清晰的方法：

$('.show_hide').click(function (e) {
    var $this = $(this);
    $this.closest(".feature-description").find(".slidingDiv").slideToggle("slow");
    var val = $this.text() == "Read More" ? "Read Less" : "Read More";
    $this.hide().text(val).fadeIn("fast");
    e.preventDefault();
});

旁注：我会建议使用CSS：$(".slidingDiv").hide();，而不是.slidingDiv { display: none; }，这将允许它们在页面加载时短暂显示导致页面闪烁。 （当你打开div时，jQuery的slideToggle将覆盖它。）

实例：

$('.show_hide').click(function (e) {
    var $this = $(this);
    $this.closest(".feature-description").find(".slidingDiv").slideToggle("slow");
    var val = $this.text() == "Read More" ? "Read Less" : "Read More";
    $this.hide().text(val).fadeIn("fast");
    e.preventDefault();
});

.slidingDiv {
  display: none;
}

<div class="features-container">
    <div class="feature">
        <div class="feature-description">
            <div class="featured-description-container">
                <h3>Feature 1 Name</h3>
                Feature 1 introduction</br>
                <div class="slidingDiv">
                    More about feature 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="read-more-button-container">
                    <a href="#" class="show_hide tech-read-more-button">Read More</a>
                </div>
            </div>

        </div>
    </div>
    <div class="feature">
        <div class="feature-description">
            <div class="featured-description-container">
                <h3>Feature 2 Name</h3>
                Feature 2 introduction</br>
                <div class="slidingDiv">
                    More about feature 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="read-more-button-container">
                    <a href="#" class="show_hide tech-read-more-button">Read More</a>
                </div>
            </div>

        </div>
    </div>
    <div class="feature">
        <div class="feature-description">
            <div class="featured-description-container">
                <h3>Feature 3 Name</h3>
                Feature 3 introduction</br>
                <div class="slidingDiv">
                    More about feature 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="read-more-button-container">
                    <a href="#" class="show_hide tech-read-more-button">Read More</a>
                </div>
            </div>

        </div>
    </div>
    <div class="feature">
        <div class="feature-description">
            <div class="featured-description-container">
                <h3>Feature 4 Name</h3>
                Feature 4 introduction</br>
                <div class="slidingDiv">
                    More about feature 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="read-more-button-container">
                    <a href="#" class="show_hide tech-read-more-button">Read More</a>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您可以将this用于当前节点和jquery函数，例如prev和parent，以选择所需的元素

<script type="text/javascript">
  $(".slidingDiv").hide();

$('.show_hide').click(function (e) {
$(this).parent().prev().slideToggle("slow");
var val = $(this).text() == "Read More" ? "Read Less" : "Read More";
$(this).hide().text(val).fadeIn("fast");
e.preventDefault();
});
</script>