1

jQuery 経由で管理したい 4 つの要素 (ボタン) を保持する class="evidence" の div があります。クリックしたボタンの背景色を変更し、他の 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">
    <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

代わりにイベントを委任することができますが、より理にかなっています。また、ボタンがすべて兄弟である場合は、.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 に答える
0

証拠の後にセレクターをフィルタリングする必要があります。

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

于 2012-06-29T14:21:43.503 に答える
0

clickわずかなパフォーマンスの観点から、イベントの範囲外のボタンを事前に選択することを個人的にお勧めします。これは、ボタンが変更される可能性がないことを前提としています。

4 つの要素 (ボタン) を保持する class="evidence" の div があります。

これを念頭に置いて、次のセレクターを使用しました。

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

これは、不要な変更を加えることなく、セレクターを 1 か所で簡単に変更できる可能性があることも意味します。

さらに一歩進んで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

これを試してください - 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

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 に答える