Question

我的代码http://jsfiddle.net/GKZRU/14/ 所有js正常工作，并添加/删除css类（在chrome js控制台中检查）但不活动的风格不适用，:( 我想在没有选择的radiobutton场上获得灰色背景。

Answer 1

这是因为您已经通过left-pannel jsFiddle控件将代码放入“DOM ready”处理程序中。这些功能不是全球性的。

尝试更改功能的定义。而不是

function surpClassAdd() {

尝试

window['surpClassAdd'] = function() {

现在，显然在实际代码中你不需要这样做。另一个（更好的）想法是退出使用“onchange”属性来绑定事件处理程序，并使用jQuery做事情（因为你无论如何都在使用库）。将处理程序绑定到“就绪”处理程序中的元素，并且函数不必是全局的（无论如何都是混乱和icky）。

Answer 2

您的代码有几个问题。

1。由于您在侧栏上选择了onDomReady，因此您定义的功能不是全局的。请改用no wrap (head)。

注意：如果使用jQuery的.bind()方法（参见＃5），则无需全局声明这些函数。

2。您在CSS窗格中不需要<style>和</style>。

3. 你在单选按钮上添加了这个类，这没有任何效果。你应该这样做：

<input type='radio' id='foo' name='mybtns' /> <label for='foo'>Label</label>

$('label[for=foo]').addClass('active').removeClass('inactive');

或者在这种情况下，请在<td>元素上执行此操作。

4。这只是一个样式问题，但您应该使用段落（<p>text</p>）而不是简单的文本节点（text）和每行后的换行符。

5. 如果您不使用内联事件处理程序和内联样式，而是将CSS和JS代码编写在单独的文件中，并像这样引用它们：

<link rel='stylesheet' href='http://example.com/css/default.css' />
<script src='http://mysite.com/js/default.js'></script>

由于您已经在使用jQuery，因此避免使用内联事件处理程序很简单：您可以使用jQuery的.bind()函数，它可以在所有浏览器中使用。

$('#el').bind('click', function() {
    // your event handler goes here
});

某些事件处理程序（例如click，keyup，change）有缩写：

$('#el').click(function() {
    // your event handler goes here
});

6。 Should I use tables for layout? 否。在这种情况下最好使用表单。

7。您可以使用.addClass('active').removeClass('inactive') ^[docs]而不是将.toggleClass('active inactive')写入两个函数中，然后您一个功能而不是两个。

Answer 3

你也可以在jsFiddle中使用它，只需在javascript而不是HTML中绑定你的函数。这是一个快速示例，也清理了一点以删除重复： http://jsfiddle.net/GDPvU/1/

一些注意事项：