gpt4 book ai didi

javascript - jQuery 和 HTML - 点击当前 div 框 id 显示子 dvi 框内容

转载 作者:太空宇宙 更新时间:2023-11-03 22:47:03 24 4
gpt4 key购买 nike

这是我的 jQuery 和 HTML 代码。

我的目标是当我点击当前的 box1, box2 或 box3 时,我想显示当前的子框。

例如:当我点击current box1时应该打开current sub_box_1,等等。我编写了一些 jQuery 代码,但无法获得结果。

谢谢!

$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).$('#sub_box_1').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

<head>

</head>

<body>
<div id="wrapp">

<div id="1" class="box">
<b>Box 1</b>

<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->

<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->

<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->

</div>
<!--wrapp-->
</body>

</html>

最佳答案

尝试使用这个:

$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).children('.sub_box').show();
});
});

jsfiddle 示例:https://jsfiddle.net/d6zf0n1b/

关于javascript - jQuery 和 HTML - 点击当前 div 框 id 显示子 dvi 框内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41555976/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com