Question

<html>
    <body>
        <div class="hdd">
            <div class="hdd_Left">
                A
            </div>
            <div class="hdd_Center">
                B
            </div>
            <div class="hdd_Right">
                C
            </div>
        </div>
    </body>
</html>

我想使用调用变量

<script>
    $(".hdd").each(function() {
        $(this).fadeTo(500,1);
        $(this).getElementsByClassName("hdd_Left").animate({'margin-right': '100px'},"slow"); //doesn't work
    }
</script>

$(this).getElementsByClassName("hdd_Left").animate({'margin-right': '100px'},"slow");

这条线不起作用。

谢谢

Answer 1

你应该写。不要混合香草JS和Jquery。

$(this).find(".hdd_Left").animate({'margin-right': '100px'},"slow");

Answer 2

您遇到的问题是该对象上没有getElementByBlassName方法调用。

Actual error when calling getElementByBlassName

相反，你需要使用类似的东西：

        $(document).ready(function(){        
            $(".hdd").each(function() {
                $(this).fadeTo(500,1);
                var childrenItems = $(this).children(".hdd_Left");
                childrenItems.animate({'margin-right': '100px'},"slow"); //works fine
            })
        });

由于上面的代码100％工作，但在我的屏幕上没有做太多，我添加了一个额外的方法来向您展示在jquery中执行此操作的另一种方法，但是在所有子项上都有一些动画：

        $(document).ready(function(){        
            $('.hdd > div').each(function () { 
               $(this).animate({
                width: "70%",
                opacity: 0.4,
                marginLeft: "0.6in",
                fontSize: "3em",
                borderWidth: "10px"
              }, 1500 );
            })
        });

如何通过类名称调用元素并使用它

2 个答案: