我想切換行中所選列的第一個孩子的班級

Question

我試圖切換行中所選列的第一個孩子的類，這里是html代碼：

         <div class="container row each-expertise">
            <div class="col l4 m4 skill-1">
                <div class="circle">
                    <i class="material-icons">phonelink_setup</i>
                </div>
                <h5>Software Development</h5>
                <p class="lead sotenue">If you have a problem to solve or an incredible  to digitally proclaim. I can help you espress it through a Web, Mobile or Desktop application. </p>
                <br class="show-on-med">
            </div>
            <div class="col l4 m4 skill-2">
                <div class="circle">
                   <i class="material-icons">web</i> 
                </div>
                <h5>Web Design and Redesign</h5>
                <p class="lead sotenue">If you need people to be informed about what you do, you need a website. You might also need a redesign if you want more from your website. </p>
            </div>
            <div class="col l4 m4 skill-3">
                <div class="circle">
                    <i class="material-icons">airplay</i>
                </div>
                <h5>I.T | Tech Evangelism</h5>
                <p class="lead sotenue">I am fond of inspiring, encouraging, teaching and bringing developers &amp; I.T guys alike together to rub minds, share skills, solutions and experience. </p>
            </div>
        </div>

這是javascript

$(document).ready(function() {
    $myskill = $("#expertise .each-expertise .col");
    $myskill.hover(function(){
      $(this).toggleClass("white indigo-text text-darken-2");
      $(this).siblings().find('.circle').toggleClass('circle').toggleClass('circled');
    });

});

但是這段代碼似乎不起作用

Answer 1

刪除siblings ，只是：

$(this).find('.circle').toggleClass('circle').toggleClass('circled');

Sibling()查找$(this)所有兄弟元素，但不包括元素本身。 因此，在兄弟姐妹中沒有.circle元素。

正如您已經寫過的那樣， toggleClass可以切換多個類：

toggleClass('circle circled');

最后：

$(this).find('.circle').toggleClass('circle circled');

隨着hover circle類的刪除，效果會更好：

$(this).find('.circle, .circled').toggleClass('circle circled');

Answer 2

演示版

您不想使用siblings（）來選擇其他.col兄弟姐妹。

您需要定位.circle和.circled否則您.circled第一個孩子的.circle .circled circled 。

$(document).ready(function() {
    var $myskill = $("#expertise .each-expertise .col");
    $myskill.hover(function(){
      $(this).toggleClass("white indigo-text text-darken-2")
      $(this).find('.circle, .circled').toggleClass('circle circled');
    });

});