2015-08-29 293 views
1

我在這裏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> 

JS

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

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

回答

1

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

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

FIDDLE DEMO

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

0

ID必須是唯一的,你可以添加處理程序類.yellowBackgroundbutton

$(function() { 

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

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

    }); 

}); 
+0

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

+0

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

+0

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

-1

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

$(function() { 

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

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

    }); 

}); 
+0

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