Question

    <div class="post-story">

                <div class="post-story-text">
                <script>
                    $(document).ready(function(){
                      $(".more").click(function(){
                        var overvalue = $(".post-story-text").css("overflow-y");
                            if (overvalue=="hidden") {
                          $(".post-story-text").addClass("more-ex");
                          $(".post-story").addClass("more-story-ex");
                          }
                          else {
                          $(".post-story-text").removeClass("more-ex");
                          $(".post-story").removeClass("more-story-ex");
                          }
                        }); 
                    });
                </script>
                As HTC readied a new version of its flagship smartphone, it planned for many challenges. It didn't know that one of them would be Roshan Jamkatel, a teenager from Schaumburg, Ill.





This is true, but Tesla is more of a niche seller than a mass-market player. Which might be what HTC becomes if sales of its all-new phone don't set some all-new records.
    <div class="more">....Continue Reading</div>
                </div>

我正在制作项目以显示不同的帖子，因为帖子很长我包含一个按钮继续阅读，但问题是当我点击“...继续阅读”或（.more）所有的div都扩展了，但我只想扩展那个特殊的div。

Answer 1

你可以试试这个

$(document).ready(function () {
    $(".more").click(function () {
        var parent = $(this).closest('.post-story');
        var overvalue = parent.find(".post-story-text").css("overflow-y");
        if(overvalue == "hidden") {
            parent.find(".post-story-text").addClass("more-ex");
            parent.find(".post-story").addClass("more-story-ex");
        } else {
            parent.find(".post-story-text").removeClass("more-ex");
            parent.find(".post-story").removeClass("more-story-ex");
        }
    });
});

Answer 2

两个词：EVENT DELEGATION

Click here for Explaination

针对点击事件定位特定div

2 个答案: