javascript - 在 jquery 中使用此方法有问题

Question

也许我太累了，但我真的不明白为什么这件事不起作用？我在这里有 jsbin：http: //jsbin.com/ariret/19/edit

谢谢你的时间！

<section class="">
    <p>Hello there, this is your flight info.</p>
    <div class="confirmation">
        <h3>Hawaiian Vacation</h3>
        <button class="btn">Flight details</button>
        <div class="ticket">
            <a href="#" class="view-boarding-pass">View Boarding Pass</a>
            <img src="http://placekitten.com/g/100/100" alt=""/>
        </div>
    </div>
</section>

jQuery：

$('.confirmation').on('click', 'button', function() {
    console.log('works');
    $(this).find('.ticket').hide(); //why is  this not working?
});

Answer 1

find()用于查找子元素。问题是.ticket的兄弟button，所以你需要使用next()：

$('.confirmation').on('click', 'button', function() {
    $(this).next('.ticket').hide();
});

Answer 2

尝试这个。我想这就是你想要的

$('.btn').click(function(){

  $('.ticket').slideToggle();

  });

和更新的 jsbin Demo

希望这可以帮助。谢谢你。

Answer 3

this处理程序内部指向按钮并且ticket不是按钮的后代，但它是下一个兄弟，因此您需要使用.next()

它应该是

$('.confirmation').on('click', 'button', function(){
console.log('works');
           $(this).next('.ticket').hide(); //why is  this not working?

        });

Answer 4

您可以同时使用它们：

 $(this).parent().find('.ticket').hide();
 $(this).next('.ticket').hide(); //why is  this not working?

您只能找到当前节点的子节点。