在父div中添加類

Question

<div class="parent"> <input type="text" /> </div>

$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });

我試圖僅在輸入字段具有值的情況下才在div中添加一個類。 我的意思是，如果我們在輸入字段中輸入文本，div會自動添加一個自類。 唯一的問題是我們不能給任何類名或ID輸入。

使用此腳本，我們可以在單擊輸入時添加類。 但是，我們需要做更多的事情。

我們可以做到嗎？

Answer 1

您可以使用input代替focus 。 您還必須檢查值以添加/刪除類。 請嘗試以下方式：

 $(document).ready(function(){ $('.parent > *').focus(); $('.parent > *') .on('input', function() { if($(this).val().trim() != '') $(this).parent().addClass('focused'); else $(this).parent().removeClass('focused'); }); }); 

 .focused{ color:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent">Test <input type="text" /> </div> 

Answer 2

使用您提供的html，它應該可以正常工作

$('.parent > *')
.focus(function() {
   if( $(this).val().length) $(this).parent().addClass('focused');
})
.blur(function() {
    if( $(this).val().length) $(this).parent().removeClass('focused');
});

OP評論后更新

<div class="some-div">Hello</div>
<div class="parent"> <input type="text" /> </div>

$('.parent > *')
.focus(function() {
    $(".some-div").addClass('focused');
})
.blur(function() {
    $('.some-div').removeClass('focused');
});

Answer 3

當然，只需使用.parent > input ：

$('.parent > input')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });

Answer 4

在此， input事件在鍵盤輸入，鼠標拖動，自動填充和復制粘貼時觸發。

您可以嘗試以下代碼-

 function toggleParentClass(elem) { console.log(elem.val()); if (elem.val().length) elem.closest('.parent').addClass('focused'); else elem.closest('.parent').removeClass('focused'); } $('.parent').on('input', function() { toggleParentClass($(this).find('input')); }); 

 .focused { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <input type="text" /> </div> 

Answer 5

如何在輸入字段上放置事件偵聽器。

如果輸入框為空，請刪除該類。 否則，添加所需的類。

最接近可幫助您找到具有給定選擇標准的最接近成員。

對於集合中的每個元素，通過測試元素本身並在DOM樹中遍歷其祖先，獲得與選擇器匹配的第一個元素。

$('input').change(function(){
     if( $(this).val().trim() === '' ){//Empty input box
        $(this).closest('.parent').removeClass('focused');
     }
     else{
        $(this).closest('.parent').addClass('focused');
     }
  }
);