如何取消選擇jQuery中的項目？

Question

我有一個jQuery的小問題。我很新，所以我會詳細解釋我在做什麼。 我有一對h1，通過jQuery獲得連續的數字。

<h1 class="number"><span></span></h1> *31 

var date = 1; 

$('.number').each(function() { 
    $(this).find('span').html(date); 
    date++; 
}); 

我能夠與.addClass("selected")選擇個別h1的。

$('.number').click(function() { 
    $(this).toggleClass("selected"); 
}); 

問題是我可以選擇多個元素。理想情況下，我可以選擇一個項目，當我選擇不同的項目時，前一個項目失敗「選擇」。我會怎麼做？

Answer 1

你可以這樣來做：

$('.number').click(function() { 
 
    $(this).toggleClass("selected") 
 
     .siblings('.selected').removeClass("selected"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><style>h1{margin:0;padding:.5em;font-size:16px;font-family:Arial,Helvetica,sans-serif;border-bottom:1px solid #ddd;cursor:pointer;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;transition:all .15s ease}h1:hover{background:#eee}.selected{background: #555!important; color: #fff}.selected:hover{background: #666!important;}</style> <h1 class="number"><span>1</span></h1><h1 class="number"><span>2</span></h1><h1 class="number"><span>3</span></h1><h1 class="number"><span>4</span></h1><h1 class="number"><span>5</span></h1><h1 class="number"><span>6</span></h1><h1 class="number"><span>7</span></h1><h1 class="number"><span>8</span></h1><h1 class="number"><span>9</span></h1><h1 class="number"><span>10</span></h1><h1 class="number"><span>11</span></h1><h1 class="number"><span>12</span></h1><h1 class="number"><span>13</span></h1><h1 class="number"><span>14</span></h1><h1 class="number"><span>15</span></h1><h1 class="number"><span>16</span></h1><h1 class="number"><span>17</span></h1><h1 class="number"><span>18</span></h1><h1 class="number"><span>19</span></h1><h1 class="number"><span>20</span></h1><h1 class="number"><span>21</span></h1><h1 class="number"><span>22</span></h1><h1 class="number"><span>23</span></h1><h1 class="number"><span>24</span></h1><h1 class="number"><span>25</span></h1><h1 class="number"><span>26</span></h1><h1 class="number"><span>27</span></h1><h1 class="number"><span>28</span></h1><h1 class="number"><span>29</span></h1><h1 class="number"><span>30</span></h1><h1 class="number"><span>31</span></h1>

Answer 2

試試這個：

$('.number').click(function() { 
    // select the .number elements that have the class .selected and remove it from them 
    $('.number.selected').removeClass('selected'); 

    // add it to this one 
    $(this).addClass("selected"); 
}); 

Answer 3

先刪除選定的類所有，然後添加它被點擊。

$('.number').click(function() { 
    $('.number').removeClass("selected"): 
    $(this).addClass("selected"); 
});