用jQuery输入后查找特定类的跨度

Question

我想问一下如何找到具有特定类的span元素。

的HTML是这样的：

<input type="checkbox" class="checkBox">
<span class="one">One</span>
<span class="two">Two</span>

我正在尝试这样，但是不起作用：

 $(".checkbox").on('click',function() {

                $(this).closest('span').find('.one').hide();  
            });

Answer 1

两个问题。

1） class="checkBox" ！=“” .checkbox“

类是区分大小写的。 您需要解决此问题。

2）跨度不是复选框的祖先

他们是兄弟姐妹。 closest()通过向上DOM树并寻找祖先来工作。 它不寻找同级。 您可以使用siblings()尝试查找span.one

Answer 2

您可以使用jQuery的.siblings()选择器：

 $("input[type='checkbox']").on('click', function() { $(this).siblings('span.one').hide(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="checkBox"> <span class="one">One</span> <span class="two">Two</span> 

请注意，尽管您的$(".checkbox")错误，因为您的输入没有该类，但具有该类型

Answer 3

closest向上移动在DOM中，所以使用next 。

 $(".checkBox").on('click', function() { $(this).next('.one').hide(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="checkBox"> <span class="one">One</span> <span class="two">Two</span> 

Answer 4

 $(".checkBox").on('click',function() { $(this).siblings('span').each(function(){ if($(this).hasClass('one')) $(this).hide() }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="checkBox"> <span class="one">One</span> <span class="two">Two</span> 

您可以将兄弟姐妹方法用于跨度。

  $(".checkbox").on('click',function() {
        $(this).siblings('span').each(function(){
           if($(this).hasClass('one'))
           $(this).hide()
        })                
    });