带有多个 div 的 jquery 动画问题（同一类）

Posted 2023-05-08

【中文标题】带有多个 div 的 jquery 动画问题（同一类）

【英文标题】：Issue with jquery animate with multiple divs (same class)

【发布时间】：2014-09-17 07:01:30

【问题描述】：

我正在经营一家在线商店，并且想为产品列表增添一点趣味。我要做的就是在用户单击该 div 中的某些文本时增加该 div 的高度。

我的问题是 div 类在我的网站上存在多次（对于每个产品）。所以当我点击时，所有的 div 都在增加，而不是只增加我想要的那个。

如果缺少详细信息或需要进一步/更好的解释，请告诉我。

这是我的代码。

非常感谢您的调查。 丹尼尔

foreach name=aussen item=module_data from=$product_listing
    <script>
        $(document).ready(function() 
            $(".box-wide-more").click(function() 
                $(".box-wide").animate(
                    height: '300px'
                , 500);
            );
        );     
    </script>

        <div class="box-wide">
            <p class="box-wide-more">Read more</p>
        </div>

/foreach

【问题讨论】：

为什么要学习脚本？将其写入 $(document).ready();单独的 js 文件中的事件

【参考方案1】：

简单;)

            $(this).closest(".box-wide").animate(
                height: '300px'
            , 500);

为什么要学习脚本？将其写入 $(document).ready();单独的 js 文件中的事件

【讨论】：

哇...确实很容易。这对我帮助很大。非常感谢。

【参考方案2】：

不是用“box-wide”类为所有 div 设置动画，而是只为被点击的父对象设置动画

JSFiddle：http://jsfiddle.net/8j4n6/

$(".box-wide-more").click(function() 


    var $this = $( this ), // The object that has been clicked ( ".box-wide-more" )
        parent = $this.parent(); // The objects direct parent

    parent.animate(
        height: '300px'
    , 500);

);

【讨论】：

closest() 可以说更好用。这种方法很容易理解并且也很有效。

非常感谢。你们太棒了。

【参考方案3】：

如果.box-wide-more的父元素这么多，那么要获取特定的父元素（即.box-wide），可以使用下面的代码。

  $(".box-wide-more").click(function()     
    $(this).parents().find('.box-wide').animate(
        height: '300px'
    , 500);
  );