使用javascript点击更改td类并不起作用

Question

尝试应用此answer来更改我的表格中单元格的类，但它不起作用：（

$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
})

我在jsfiddle中的示例代码是here ..

有人可以看一看并指出要改变的内容吗？

我正在尝试将字体设置为红色并更改单击单元格的背景图像，其他单元格将离开（或返回）灰色字体和默认背景图像。

提前谢谢！

瓦尔达斯

Answer 1

因为你已经包含了MooTools而不是jQuery;）

结帐this fiddle。它在使用jquery时起作用...

$('td.link').click(function() {
    $('td.button_active').removeClass('button_active');
    $('td.link').addClass('button');
    $(this).removeClass('button');
    $(this).addClass('button_active')
});

修改

在这里，你找一个合适的版本。我做了什么：将按钮放在表格单元格内（而不是将表格单元转换为按钮），使用active类作为活动按钮（而不是将按钮css复制到active_button类） ，并改变了一点javascript（减少行=很好:)）

Check it out here (fiddle)

相关代码：

<强> HTML

<table>
    <tr>
        <td><a href="#" class="link button active">Link One</a></td>
    </tr>
    <tr>
        <td><a href="#" class="link button">Link Two</a></td>
    </tr>
    <tr>
        <td><a href="#" class="link button">Link Three</a></td>
    </tr>
    <tr>
        <td><a href="#" class="link button">Link Four</a></td>
    </tr>
</table>

<强> CSS

.button {
    display: block;
    width: 113px;
    height: 30px;
    text-decoration: none;
    background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button.svg);
    background-repeat: no-repeat;
    background-size: 138px 33px;
    border: 1px solid #e6e6e6;
    text-align: right;
    padding: 0 25px 0 0;
    font: 16px/30px 'Ubuntu';
    color: #737373;
}

.active {
    background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_active.svg);
    color: #ff0000;
    cursor: default
}

.button:not(.active):hover {
    background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_hover.svg);
    color: #000000;
}

<强>的Javascript

$('a.link').click(function(e) {
    e.preventDefault();
    $('a.active').removeClass('active');
    $(this).addClass('active')
});

注意：在实时版本中，不要忘记将您的javascript包装在$ .ready或封闭

Answer 2

使用jsfiddle中定义的库更准确。这是what you need.

$('td.link').click(function() {
    $('td.button_active').each(function(index) {
        $(this).removeClass('button_active');
    });
    $('td.link').each(function(index) {
        $(this).addClass('button')
    });
    $(this).removeClass('button');
    $(this).addClass('button_active')
})