如何使用 jQuery 选择下一个 div?

发布于 2024-11-13 06:29:42 字数 2434 浏览 4 评论 0原文

当谈到 jQuery 时,我是个菜鸟,我尝试使用 next() 选择器选择下一个元素,但在让它工作时遇到了一些麻烦!

我想做的是在用户完成在 ui 滑块上的选择后激活 SlideDown() 。这是我的代码:

$('.slider').slider({
   stop: function(event, ui) {
       $(this).nextAll('.secondq:first').slideDown('slow') 
   }
});

问题是,这根本不起作用。仅当我将“secondq”问题放入 ui 滑块的父 div 内时,它才会起作用。这是我的 HTML:

<div class="option">
                            <h2 align="left">How high is your ceiling from the floor?</h2>
                            <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
                            <div class="slidewrap">
                                <div class="sliderFt slider"></div>
                            </div>
                        </div>
                        <!-- End Option -->
                        <div class="option">
                            <h2 align="left">How many windows do you have?</h2>
                            <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
                            <div class="slidewrap">
                                <div class="sliderWinDoor slider"></div>
                            </div>
                            <div class="secondq" style="display:none;">
                                <h2>What type of material are your windows made of?</h2>
                                <div class="radiocont">
                                    <label>Wood</label>
                                    <input type="radio" class="styled" value="wood" name="windowtype" />
                                </div>
                                <div class="radiocont">
                                    <label>Metal</label>
                                    <input type="radio" class="styled" value="metal" name="windowtype" />
                                </div>
                                <div class="radiocont">
                                    <label>PVC</label>
                                    <input type="radio" class="styled" value="pvc" name="windowtype" />
                                </div>
                            </div>
                        </div>

I am quite a noob when it comes to jQuery and I'm trying to select the next element using the next() selector but having a little trouble in getting it to work!

What I'm trying to do is to activate slideDown() once the user has finished making their selection on a ui slider. Here is my code:

$('.slider').slider({
   stop: function(event, ui) {
       $(this).nextAll('.secondq:first').slideDown('slow') 
   }
});

Trouble is, this doesn't work at all. It will only work if I put the 'secondq' question inside the parent div of the ui slider. Here is my HTML:

<div class="option">
                            <h2 align="left">How high is your ceiling from the floor?</h2>
                            <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
                            <div class="slidewrap">
                                <div class="sliderFt slider"></div>
                            </div>
                        </div>
                        <!-- End Option -->
                        <div class="option">
                            <h2 align="left">How many windows do you have?</h2>
                            <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
                            <div class="slidewrap">
                                <div class="sliderWinDoor slider"></div>
                            </div>
                            <div class="secondq" style="display:none;">
                                <h2>What type of material are your windows made of?</h2>
                                <div class="radiocont">
                                    <label>Wood</label>
                                    <input type="radio" class="styled" value="wood" name="windowtype" />
                                </div>
                                <div class="radiocont">
                                    <label>Metal</label>
                                    <input type="radio" class="styled" value="metal" name="windowtype" />
                                </div>
                                <div class="radiocont">
                                    <label>PVC</label>
                                    <input type="radio" class="styled" value="pvc" name="windowtype" />
                                </div>
                            </div>
                        </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

哆兒滾 2024-11-20 06:29:42

nextAll 仅获取兄弟姐妹。根据您的 HTML 结构,您可以执行以下操作:

$(this).parent().next()

为了使其更加独立于结构,您还可以执行以下操作:

$(this).closest('.slidewrap').nextAll('.secondq:first')

nextAll only gets siblings. Based on your HTML structure, you could do:

$(this).parent().next()

To make it more independent from the structure, you could also do:

$(this).closest('.slidewrap').nextAll('.secondq:first')
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文