刪除引導設置

內使用jQuery懸停在某個類我有以下引導4卡：刪除引導設置

<div class="card"> 
    <div class="card-body"> 
     <img src="img/person3.jpg" alt="" class="img-fluid rounded-circle w-50 mb-3"> 
     <h3>John Doe</h3> 
     <h5 class="text-muted">Editor</h5> 
     <p class="">Lorem ipsum dolor, sit amet consectetur adipisicing</p> 
     etc...

的代碼的其餘部分是不相關的，並且所有的代碼按預期工作。不過，我想這樣做，只要我將鼠標懸停在卡上，'text-muted'就會從孤立的h5後代中移除。我原本以爲我的jQuery的了，所以我嘗試了以下內容：

<script> 
    $('.card').hover(function(){ 
     $(this).find('h5').removeClass('.text-muted'); 
    }); 
</script>

然而，這似乎正好是無所事事的我，我想不通爲什麼。這應找到覆蓋卡的下一個h5後裔，並從中刪除相應的text-muted類。在h5之前是否有img和h3兄弟姐妹有這個事實？

我該如何在這裏完成我的目標？

來源

2017-10-16 Johnny Apple

'做了me'-究竟什麼>你這是什麼意思呢？班級沒有刪除？或者你期望的其他事情？ –

我的意思是毫不誇張地說，通過將這個jQuery添加到我的HTML中，沒有任何變化。畢竟我在身體關閉標記之前的其他腳本。 –

你必須這樣做象下面這樣： -

$(document).ready(function(){ 
    $('.card').hover(function(){ 
    $('h5', this).removeClass('text-muted'); 
    }, function(e) { 
    $('h5', this).addClass('text-muted'); 
    }); 
});

工作例如： -

$(document).ready(function(){ 
 
    $('.card').hover(function(){ 
 
    \t $('h5', this).removeClass('text-muted'); 
 
    }, function(e) { 
 
    $('h5', this).addClass('text-muted'); 
 
    }); 
 
});

.text-muted{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="card-body"> 
 
    <img src="img/person3.jpg" alt="" class="img-fluid rounded-circle w-50 mb-3"> 
 
    <h3>John Doe</h3> 
 
    <h5 class="text-muted">Editor</h5> 
 
    <p class="">Lorem ipsum dolor, sit amet consectetur adipisicing</p> 
 
    </div> 
 
</div>

工作的jsfiddle鏈接： - https://jsfiddle.net/zuakca4r/

注： - 如果您刪除.從'.text-muted'（在removeClass()使用）

您的代碼也能工作。

檢查： - https://jsfiddle.net/fc89fmys/

來源

2017-10-16 04:58:58

賓果。刪除找到了訣竅。爲什麼發現不起作用？ –

@JohnnyApple如果你從''.text-muted''（用在'removeClass（）'中）中刪除'.'，你的代碼也會工作。檢查這個： - https://jsfiddle.net/fc89fmys/ –

在document.ready函數內傳遞代碼。

<script> 
    $(document).ready(function(e) { 
     $('.card').hover(function(e){ 
     $(this).find('h5').removeClass('text-muted'); 
     }, function(e) { 
     $(this).find('h5').addClass('text-muted'); 
     }); 
    }); 
</script>

來源

2017-10-16 04:48:40 RGS

使用您的確切代碼沒有視覺變化。我也從來不需要文檔就緒函數來將我的jQuery放在我目前的工作流程下（使用Bootstrap 4 Git Starter Pack和NPM）。 –

當您使用removeClass功能，不包括 ''。所以它應該是

$(document).ready(function() { 
    $('.card').hover(function() { 
     $(this).find('h5').removeClass('text-muted'); 
    }); 
})

如果您想在鼠標離開時添加該類，請嘗試使用此代碼。

$(document).ready(function() { 
    $('.card').hover(function() { 
     $(this).find('h5').removeClass('text-muted'); 
    }); 

    $('.card').mouseenter(function() { 
     $(this).find('h5').removeClass('text-muted'); 
    }); 

    $('.card').mouseleave(function() { 
     $(this).find('h5').addClass('text-muted'); 
    }); 
})

你可以在這裏檢查此https://codepen.io/anon/pen/ZXqjrK

來源

2017-10-16 05:11:59 ronniel

刪除引導設置

回答

相關問題