jQuery的ToggleClass上的多個元素

我需要切換多個元素類，不能完全弄清楚如何遍歷DOM和改變他們。我有一個靜音 - 所有的BTN，點擊時，應該把所有的靜音圖標變成紅色。它目前只會將我點擊的btn圖標變成紅色，而不是其他圖標。謝謝。jQuery的ToggleClass上的多個元素

<script>$(function() { 
     $(".js_mute-all").click(function() { 
      $(".icon-mute").toggleClass('red'); 
     }); 
    });</script>

HTML

<ul class="call-list"> 
     <li class="byself"> 
      <a href="#" class="btn btn-clear-white js_invite"><i class="icon-plus"></i> Invite Others</a> &nbsp; 
      <a href="#" class="btn btn-clear-white right js_mute-all"><i class="icon-mute"></i> Mute All</a> 

      <form class="invite-others"> 
       <select> 
        <option>Select a person</option> 
       </select> 
       <input type="submit" value="Send" class="btn btn-clear-white" /> 
      </form> 
     </li> 
     <li> 
      <p>Mary Jones</p> 
      <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span> 
     </li> 
     <li> 
      <p>Ray Jackson</p> 
      <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span> 
     </li> 
     <li> 
      <p>Joe Lazy</p> 
      <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span> 
     </li> 
     <li> 
      <p>Tom Hanson</p> 
      <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span> 
     </li> 
     <li> 
      <p>Mark Uraine</p> 
      <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span> 
     </li> 
     <li> 
      <p>Some Otherguy</p> 
      <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span> 
     </li> 
    </ul>

來源

2014-07-25 mapk

你使用了什麼web字體圖標？ –

$(".js_mute-all").click(function(e) 
{ 
    e.preventDefault(); 
    $(".icon-mute").toggleClass("red"); 
});

的伎倆對我來說：http://jsfiddle.net/h6h2f/1/

通過事件e傳遞給函數，則阻止默認動作（這是遵循錨），你原來的代碼工作正常。

來源

2014-07-25 16:33:48 Luke

你必須每個都.icon靜音元素和切換它的類。代碼可能是這樣的。

<script> 
    $(function() { 
    $(".js_mute-all").click(function() { 
     $(".icon-mute")each(function(){ 
      $(this).toggleClass('red'); 
     }) 
    }); 
});</script>

希望它有幫助。

問候。

來源

2014-07-25 16:32:05

jQuery的ToggleClass上的多個元素

回答

相關問題