Question

我有一个带有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以按钮开头，按钮是div class =“evidence”的子项。我可以使用firebug进行调试，我可以在$（'。evidence [id ^ = button]'）上看到断点停止，但该函数未执行。

你能帮助我吗？

EDITED

这是我的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>

Answer 1

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

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

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

Answer 2

您需要在证据后过滤选择器。

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

Answer 3

我知道您有一些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');
});

Here is a working jsfiddle

Answer 4

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

我有一个div，其中class =“evidence”包含4个元素（按钮）

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

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');

Answer 5

我认为您的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');
});

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

Answer 6

您可以代替事件，更有意义。此外，如果按钮都是兄弟，请使用.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');
});

JQuery处理事件，但不执行函数

6 个答案: