我想切换行中选定列的第一个子类。

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

Demo

您不希望使用兄妹()来选择其他的.col兄弟姐妹。

您需要以.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');
    });

});