Question

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <button id="myButton">My Button</button><br /><br />
        <span id="myPara"> My paragraph</span>      
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

下面的

是custom.css

中的代码

#myPara{
    border: 1px solid black;
    color: black;
    padding: 5px;
}

下面的

是custom.js

中的代码

$('#myButton','#myPara').on('click',function(){
    $(this).css('border-color','white').css('background','black').css('color','white');
});

我想应用给定的css，如jquery代码所示。

它也没有在控制台中给出任何错误，这使我更难找到错误。

在我的浏览器中，点击时没有显示css效果。

我是jQuery的初学者。

Answer 1

$('#myButton','#myPara').on('click',function(){

在这一行中，第一个参数是CSS选择器，第二个参数用于上下文。你可能想要这个：

$('#myButton,#myPara').on('click',function(){

您可以找到有关how the $() function works here的更多信息。

Answer 2

你没有错误地编码...

$('#myButton').on('click',function(){
    $('#myPara').css({
        borderColor: 'white',
        backgroundColor: 'black',
        color: 'white'});
});

在jQuery正确格式化中组合CSS属性，并检查选择器。在你的jQuery中this指的是按钮和段落。

＆＃13;

$('#myButton').on('click',function(){
        $('#myPara').css({
            borderColor: 'white',
            backgroundColor: 'black',
            color: 'white'});
    });

＆＃13;

#myPara{
    border: 1px solid black;
    color: black;
    padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">My Button</button><br /><br />
        <span id="myPara"> My paragraph</span>

＆＃13;

如果您希望在按钮或时单击该段落时发生更改，则需要更改jQuery选择器....注意引号和逗号在选择器中。这将改变点击的内容，而不是每次都改变段落。

＆＃13;

$('#myButton, #myPara').on('click', function(){
        $(this).css({
            borderColor: 'white',
            backgroundColor: 'black',
            color: 'white'});
    });

＆＃13;

#myPara{
    border: 1px solid black;
    color: black;
    padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">My Button</button><br /><br />
        <span id="myPara"> My paragraph</span>

＆＃13;

Answer 3

您要在context来电时将"#myPara"设置为字符串jQuery()。使用

$('#myButton').on('click',function() {
    $("#myPara")
    .css({borderColor:'white', background:'black', color:'white'});
});

Answer 4

逗号应该在选择器内部，如

$('#myButton, #myPara').on('click',function(){ 
$(this).css('border-color','white').css('background','black').css('color','white'); 
});

Answer 5

看起来你想要“如果单击按钮，那么#myPara会改变颜色”这可以通过以下代码完成：

    jQuery('#myButton').click(function(){
         jQuery('#myPara').addClass('active');
    });

    .active {
        border-color: white;
        background: black;
        color: white;
    }

添加课程似乎是一种更有效的方法。这样，添加/删除/编辑样式就更容易了。

jQuery中的样式代码无法正常工作

5 个答案: