Javascript-选择一个元素的所有子元素并使用jQuery将它们淡出？

2019-10-31 02:45:08 阅读：296 来源： 互联网

标签：children fadeout javascript jquery

我正在使用以下HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Project Quiz</title>
    <link rel="stylesheet" type="text/css" href="z/baseCss.CSS">
    <script src="/jquery-1.9.1.min.js"></script>
    <script src="/baseJS.js"></script>
</head>
<body>

<div id=header></div>
<div id=contain>
    <h1>Welcome to my web application</br>
  Please enter your name, click 'continue' and have fun</h1>
    <form>
        <input type="text" id="name" value="John Doe"/>
    </form>
    <div class="awesome">Continue</div><br/>
</div>
<div id=footer></div>

</body>
</html>

和jQuery的代码：

$(document).ready(function(){
    $("input")
        .focus(function(){
        $(this).css('outline-color','#559FFF');
        $(this).blur(function(){
            $(this).css("outline-color","#FF0000");
        });
    });
    $("input").click(function(){
     var value = $(this).val(function(){
         $(this).html("");
      });
    });
    $(".awesome").click(function(){
        b._slide(1000);
    });
    var b = $("div:nth-child(2)");
    alert(b);
});

我的问题是我无法弄清楚如何选择< div id =“ contain”>的所有子项.然后单击“ div”按钮(具有“ awesome”类的按钮),使它们淡出.

到目前为止,这是我尝试过的：

$(".contain").each(function(){
    $(this).fadeOut(1000);
});

but it didnt work also i tried: 
$(".contain").children(function(){
    $(this).fadeOut(1000);
});

同样的结果在这里.

我究竟做错了什么？我只需要淡出< div id =“ contain”>并保持其他所有内容不变.

解决方法:

您需要使用：

$("#contain").children().fadeOut(1000);

> $(this)是您的选择器
> .children()选择一个元素的所有子元素
> .fadeOut(1000)淡出当前选择

您的尝试是错误的,因为：

$(".contain").each(function(){ $(this).fadeOut(1000); });

选择类为.contain的所有元素并将其隐藏

$(".contain").children(function(){ $(this).fadeOut(1000); });

选择类为.contain的元素,然后将函数传递给它不处理的.children().

请注意,在您的情况下,contain是一个ID,而不是一个类.

标签：children,fadeout,javascript,jquery
来源： https://codeday.me/bug/20191031/1972703.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript-选择一个元素的所有子元素并使用jQuery将它们淡出？