javascript

Question

我的代码在这里http://jsfiddle.net/GKZRU/14/ 所有 js 工作正常，并添加/删除 css 类（在 chrome js 控制台中检查）但不活动的样式不适用，:( 我想要单选按钮字段上的灰色背景没有选择。

score 4 · Accepted Answer

这是因为您已通过左侧面板 jsFiddle 控件将代码放入“DOM 就绪”处理程序中。这些函数不是全局的。

尝试更改函数的定义。代替

function surpClassAdd() {

尝试

window['surpClassAdd'] = function() {

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

score 2 · Accepted Answer

您的代码有几个问题。

1.由于您onDomReady在侧边栏上进行了选择，因此您定义的函数不是全局的。改为使用no wrap (head)。

注意.bind()：如果你使用 jQuery 的方法（见 #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. 我应该使用表格进行布局吗？不，在这种情况下最好使用表格。

7..addClass('active').removeClass('inactive')你可以使用.toggleClass('active inactive') ^[docs]而不是编写两个函数，然后你有一个函数而不是两个函数。

score 1 · Accepted Answer

你也可以让它在 jsFiddle 中工作，只需将你的函数绑定在 javascript 中而不是 HTML 中。这是一个简单的例子，也清理了一点以删除重复：http: //jsfiddle.net/GDPvU/1/

几点注意事项：

javascript - jquery addClass 奇怪的问题