1

我有一个带有 class="evidence" 的 div，其中包含我想通过 jQuery 管理的 4 个元素（按钮）。我必须更改单击按钮的背景颜色，并重置其他 3 个按钮背景以模拟切换按钮

我写了这个：

$('.evidence [id^=button]').on('click', function () {
    $('.evidence [id^=button]').not($(this)).css('backgroud-color', '#88e885');
    $(this).css('backgroud-color', '#559153');
});

按钮 ID 以 button 开头，并且按钮是 div class="evidence" 的子级。我可以使用 firebug 进行调试，并且可以看到 $('.evidence [id^=button]') 上的断点停止，但该函数未执行。

你能帮助我吗？

已编辑

这是我的 HTML

<div class="evidence">
    <table>
        <tr>
            <td><asp:Button runat="server" CssClass="btn" ID="button1"/></td>
            <td><asp:Button runat="server" CssClass="btn" ID="button2"/></td>
            <td><asp:Button runat="server" CssClass="btn" ID="button3/></td>
            <td><asp:Button runat="server" CssClass="btn" ID="button4"/></td>
        </tr>
    </table>
</div>
4

6 回答 6

0

我假设您的 HTML 看起来像这样：

<div class="evidence">
    <input type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <input type="button" value="4" />
</div>

此 jQuery 适用于上述标记：

$(".evidence input[type=button]").click(function(){
    $(".evidence input[type=button]").css('background-color', '#559153'),
    $(this).css('background-color', '#88e885');
});

这比您提供的代码示例更简单；单击按钮时，它会重置按钮上的所有背景颜色，然后设置单击按钮的颜色。

于 2012-06-29T14:38:00.387 回答
0

我了解您有一些 HTML，例如：

<div class="evidence">
    <button id="button-n1">1<button>
    <button id="button-n2">2<button>
    <button id="button-n3">3<button>
    <button id="button-n4">4<button>
</div>

你有一个错字background-color，而是你写backgroud-color的，那是因为你的代码不工作。

我建议将该.siblings()方法用于您想做的事情。

$('.evidence [id^=button]').on('click', function () {
   $(this)
     .css('background-color', '#559153')
     .siblings("[id^=button]").css('background-color', '#88e885');
});

这是一个工作 jsfiddle。

于 2012-06-29T14:24:01.777 回答
0

我个人建议click从轻微的性能角度预先选择事件范围之外的按钮。这是假设按钮不会更改。

我有一个包含 4 个元素（按钮）的 class="evidence" 的 div

考虑到这一点，我使用了以下选择器：

var buttons = $('.evidence input[type="button"]');
$(buttons).click(function()
{
    $(buttons).css('background', '#88e885').not(this).css('background', '#559153');
});

这也意味着您可以轻松地在一个地方更改选择器，而无需进行更多不必要的更改。

你可以更进一步，制作一个 jQuery 插件......

(function ($)
{
    $.fn.buttonToggler = function (inactiveColour, activeColour)
    {
        var buttons = this;
        return buttons.click(function()
        {
           buttons.css('background', inactiveColour).not(this).css('background', activeColour);
        });
    }
})(jQuery);

$('.evidence input[type="button"]').buttonToggler('#88e885', '#559153');
​
于 2012-06-29T14:25:59.610 回答
0

您需要在证据之后将选择器过滤为某些内容。

$('.evidence div[id^=button]')

于 2012-06-29T14:21:43.503 回答
0

试试这个 - http://jsfiddle.net/A9jzR/

$('div.evidence button').on('click', function() {
    $('div.evidence button').css('background', '#88e885');
    $(this).css('background', '#559153');
});

无需申请.not()。您可以用切换颜色为所有按钮着色，然后为您单击的按钮提供所需的外观。

于 2012-06-29T14:21:33.297 回答
0

您可以改为委托事件，这更有意义。此外，如果按钮都是同级按钮，请使用该.siblings()函数获取其他按钮：

$('.evidence').on('click', '[id^=button]', function () {
    $(this).css('background-color', '#559153')
        .siblings().css('background-color', '#88e885');
});

如果他们不是兄弟姐妹，例如：

$('.evidence').on('click', '[id^=button]', function () {
    $(this).css('background-color', '#559153')
        .closest('.evidence').find('[id^=button]')
        .css('background-color', '#88e885');
});
于 2012-06-29T14:45:22.377 回答