Question

如果我要注释掉jquery .style并将其替换为当前注释的行，则代码可以正常工作。我不明白这个问题，因为他们都完成了同样的事情。这可能是一个概念问题而不是编码问题，但我不确定。任何帮助，将不胜感激。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>


  <div id="header">

    <div id="navimg-holder">
        <img src="images/navimg.jpg" alt="">
    </div>

    <div id="navlist">

        <div class="navelm">
            <a href=""> <p> Home </p> </a>
        </div>
        <div class="navelm">
            <a href=""> <p> Contant </p> </a>
        </div>
        <div class="navelm">
            <a href=""> <p> Experience </p> </a>
        </div>
        <div class="navelm">
            <a href=""> <p> Interests </p> </a>
        </div>

    </div>

    <div id="logo-holder">

    </div>
    <div id="socialmedia-div">

        <div class="socialmedia-holder"> 
            <a href="https://facebook.com"> <img src="images/social1.jpg" alt="" > </a>
        </div>

        <div class="socialmedia-holder" id="second-socialmedia">
            <a href="https://twitter.com"> <img src="images/social2.jpg" alt="" id="twitter"> </a>
        </div>

        <div class="socialmedia-holder" id="third-socialmedia">
            <a href="https://www.instagram.com"> <img src="images/social3.jpg" alt="" id="insta"> </a>
        </div>

    </div>

  </div>

  <div id="content1">

  </div>

<script src="js/jquery-3.2.1.js"></script>
<script src="js/index.js"></script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>


/*    * * * * * * * * * * * * * * CSS * * * * * * * *  * * *   */

 #navlist
{
    position: absolute;
    height: 200px;
    width: 200px;
    margin-top: 140px;
    z-index: 1;
}

.navelm
{
    position: relative;
    border:1px solid black;
    height: 20%;
    width: 100%;
    margin-top: 5%;
}

.navelm a
{
    text-decoration: none;
}

.navelm p
{
    color:white;
    text-align: center;
    font-family: Palatino;
}


/*  * * * * * * * * * * *  JAVASCRIPT * * * * * * */

$("#navimg-holder img").click(showMenu);

function showMenu()
{
    $('.navelm').each(function()
        {
            this.css("background-color","white");
           /* this.style.backgroundColor = "white";  */
        });

}

Answer 1

this是一个JavaScript DOM对象。 this没有方法.css。您需要将它包装在jQuery对象中。

$(this).css("background-color","white");

为此起作用。

Answer 2

您甚至不需要each，只需执行：

function showMenu(){
    $('.navelm').css("background-color","white");
}

jQuery将在内部循环遍历所有匹配的元素，并将样式应用于所有

Answer 3

this不是jQuery对象，它是一个普通的DOM节点，你必须把它包装在$（）中。

以下是三种方法：

$elements.each(function(i, el){
    $(this).css('key', value);
    //or
    $(el).css('key', value);
    //or
    $(someOtherNodeListOrCollection[i]).css('key', value);
});

请记住，您可以执行多个属性

$item.css({
   'key1': value,
   'key2': value2
});

甚至更好的表现和分离问题：使用选择类，使用addClass或removeClass。

Vanilla JS .style工作但是jQuery .css不是吗？

3 个答案: