從該特定父級中查找同級類以執行事件

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();
});

小提琴