按鈕大小和顏色變化

我在這裏4按鈕，但只有第一個按鈕工作，我希望相同的jQuery代碼有點改變，在所有這些按鈕上工作... 我可以複製過去的jquery 4次和改變它的工作，但我想要更簡單和更少的代碼與一個jquery如何做到這一點？按鈕大小和顏色變化

CSS

.yellowBackground {  
    background-color: yellow;  
} 

.redBackground {  
    background-color: red; 
} 

button.yellowBackground {  
    width:50px; 
    height:50px; 
}

HTML

<table> 
    <tr> 
     <td><button id="button" class="yellowBackground">Pause</button></td> 
     <td><button id="button" class="yellowBackground">Pause</button></td> 
     <td><button id="button" class="yellowBackground">Pause</button></td> 
     <td><button id="button" class="yellowBackground">Pause</button></td> 
    </tr> 
</table>

$(function() {  
    $("#button").click(function() {  
     changeThumb();  
    });  
}); 

function changeThumb() {  
    $("#button").toggleClass("redBackground");  
}

來源

2015-08-29 waleedd32

ID必須是唯一的，你也可以做到這一點使用類選擇yellowBackground象下面這樣：

$(function() { 
     $(".yellowBackground").click(function() { 
     $(this).toggleClass("redBackground"); 
    }); 
});

FIDDLE DEMO

而且你已經錯過了開幕<tr>標籤內的<table> html.Please correct that

來源

2015-08-29 09:46:32 Pawan

ID必須是唯一的，你可以添加處理程序類.yellowBackground或button

$(function() { 

    $(".yellowBackground").click(function() { 

     $(this).toggleClass("redBackground"); 

    }); 

});

來源

2015-08-29 09:44:30 LTasty

謝謝你，我是新來這個節目，有人告訴我，我們只能有一個ID，但很多類..我如何知道何時使用class和id？ – waleedd32

你需要使用ID當元素只有一個而類使用時，你有元素重複到代碼:) – LTasty

謝謝你，現在我明白了，我試圖閱讀有關'這'，但仍然不知道它的工作是什麼？它指的是什麼？如果我將它更改爲$（「。yellowBackground」），那麼它會使一切變爲紅色...... – waleedd32

-1

指定元素之前，選擇在一個jQuery選擇的類或ID：

$(function() { 

$('button#button').click(function() { 

     $(this).toggleClass("redBackground"); 

    }); 

});

來源

2015-08-29 09:48:29 Ric

對不起，它不是div，而是按鈕 – Ric

按鈕大小和顏色變化

回答

相關問題