我有许多具有相同类的动态(php)创建的文章。我想单击一个按钮来定位父级兄弟姐妹的孩子。只是那个实例。我当前的代码正在运行,但是在所有文章上都显示/隐藏了'.descriptionText'div。

我该如何定位我单击的文章中包含的此类的实例?

所有代码都在下面,但主要内容是:

$(this).closest(".resultImageContainer")
    .siblings(".descriptionTextContainer")
    .children('.descriptionText')
    .toggle("fold", 100, "linear");


我在以下问题中尝试了adivce:HereHere

我的HTML:

<div class="resultImageContainer">
    <div class="resultImage">
        {!! HTML::image('images/gd.jpg') !!}
    </div>

    <!-- This is the button below: -->
    <i class="fa fa-plus-square showMoreDetails"></i>
</div>
<div class="daytypeContainer">
    <ul id="dayIcons">
        <li>
            <div class="dayCircle">
                <span>M</span>
            </div>
        </li>
        <li>
            <div class="dayCircle">
                <span>T</span>
            </div>
        </li>
    </ul>
</div>
<div class="descriptionTextContainer">
    <!-- This 'descriptionText' is the div I want to show/hide. -->
    <div class="descriptionText">
        <p>Cheesecake jujubes topping wafer donut tart sweet fruitcake.Dessert carrot cake sugar plum marzipan chocolate cotton candy marzipan danish. Cake jelly apple pie brownie pie ice cream.</p>
    </div>
    <div class="deetsContainer">
        <div class="otherInfoContainer">
            <ul id="otherInfoIcons">
                <li>
                    <i class="fa fa-phone"></i>
                    <p>022132032</p>
                </li>
                <li>
                    <i class="fa fa-envelope-o"></i>
            </ul>
        </div>
        <div class="addressContainer">
            <p class="streetText">43 Ponsonby Rd</p>
            <p class="cityText">AUCKLAND</p>
        </div>
    </div>
</div>


这是我正在使用的JQUERY:

$('.showMoreDetails').on('click touch', function(){
    if ($(this).hasClass('fa-plus-square')){
        $(this).removeClass('fa-plus-square');
        $(this).addClass('fa-minus-square');
    } else {
        $(this).removeClass('fa-minus-square');
        $(this).addClass('fa-plus-square');
    };

    $(this).closest(".resultImageContainer")
        .siblings(".descriptionTextContainer")
        .children('.descriptionText')
        .toggle("fold", 100, "linear");

    $(this).parent(".resultImageContainer").toggleClass("justTitle", 100, "linear");
});

最佳答案

这可能是您要寻找的:

$(this).parent()
    .nextAll(".descriptionTextContainer")
    .first()
    .children('.descriptionText')
    .toggle("fold", 100, "linear");


除非按钮的位置是动态的,否则此时您可能再次需要.closest()。就是说,如果您对标记有任何控制权,那么有很多方法可以使您的生活更轻松。

.nextAll()。first()并不是世界上最糟糕的东西(http://jsperf.com/jquery-next-loop-vs-nextall-first/2),但是它仍然很脏,因为您的标记有点奇怪。

关于javascript - 如何使用Jquery定位父级 sibling 的 child 的单个实例?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33403065/

10-11 12:33
查看更多