为什么Jquery Jfiddle不起作用？

Question

我试图让这个基本的jQuery功能工作，所以我可以在我正在工作的网站的大部分使用相同的想法。查看了一个小时的代码，我检查了jquery文档，以确保我的选择器都在正确的位置，并且使用了正确的选择器。

我只是不知道如何解决它，所以当我点击按钮，面板的字体颜色改变。

https://jsfiddle.net/p28jjo2u/

<div class="col-xs-3"> 
    <div id="panel4" class="panel panel-primary"> 
    <div class="panel-heading panel4"> 
     #panel4 
    </div> 
    </div> 
</div> 


<a class="btn btn-default" id="button" href="#" role="button">Link</a> 

CSS

#button { 
    outline: none; 
} 
#panel4 .panel4 { 
    color: white; 
} 

jQuery的

//playing around with panels and buttons in schedule tab 
$(document).ready(function(){ 
    $('#button').on('click', function() { 
    $('#panel4').find('.panel4').css({ 
     'color': 'red'; 
    }); 
    }); 
}); 

Answer 1

看到控制台。

您的css对象中有另外的;。

https://jsfiddle.net/p28jjo2u/1/

//playing around with panels and buttons in schedule tab 
$(document).ready(function(){ 
    $('#button').on('click', function() { 
    $('#panel4').find('.panel4').css({ 
     'color': 'red' 
    }); 
    }); 
}); 

Answer 2

控制台是你的朋友。你有一个语法错误

//playing around with panels and buttons in schedule tab 
$(document).ready(function(){ 
    $('#button').on('click', function() { 
    $('#panel4').find('.panel4').css({ 
     'color': 'red'; 
    }); 
    }); 
}); 

从'color': 'red';删除分号，它应该工作。