Question

我的页面中有一个HTML代码列表 - 要求是点击.cta-button，我希望隐藏.title div和显示的.alternate-input div（两者都来自同一个父级）） - 我为它编写的jquery触发页面上显示的所有.alternate-input div。不确定我在哪里错了？

HTML

<div class="row">
    <div class="label">Abc</div>
    <div class="title">Xyz</div>
    <div class="alternate-input" style="display:none;">
       <input type="text" name="" value="Xyz">
    </div>
    <a href="#" class="cta-button">Call to action</a>
</div>

Jquery的

$(".cta-button").click(function() {
    $(this).parent().siblings().find(".title").hide();
    $(this).parent().siblings().find(".alternate-input").show();
});

Answer 1

我尝试了查看jquery文档，这似乎有用

$(".cta-button").click(function() {
    $(this).closest('div').find(".title").hide();
    $(this).closest('div').find(".alternate-input").show();
});

Answer 2

.parent().siblings()正在查看div.row的兄弟姐妹。您只想使用$(this).siblings()。此外，.find()是不需要的，您可以将选择器放在.siblings()中。

试试这个：JSFIDDLE

$(".cta-button").click(function() {
    $(this).siblings(".title").hide();
    $(this).siblings(".alternate-input").show();
});

Answer 3

您可以使用.parents()：

$(".cta-button").click(function() {
    $(this).parents(".row").find(".title").hide();
    $(this).parents(".row").find(".alternate-input").show();
});

fiddle

从此特定父级中查找兄弟级别以执行事件

3 个答案: