用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")是错误的，因为您输入的内容没有 class ，但是具有 type

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