的jQuery插件的顏色沒有通過可選元素觸發

我可以使用jQuery的元素 - 可選的jQuery插件的顏色沒有通過可選元素觸發

<div class="toggler"> 
     <div id="effect" class="ui-widget-content ui-corner-all"> 
      <h3 class="ui-widget-header ui-corner-all">Animate</h3> 
      <p> 
       jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors. 
      </p> 
     </div> 
    </div> 

<ol id="button"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
    <li class="ui-widget-content">Item 7</li> 
</ol>

觸發顏色動畫插件，而不是按鈕 - 的

<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>

我試圖結合兩效果不成功。

$(function(){ 

    var state = true; 
    $("#button").on("click", function() { 
     if (state) { 
     $("#effect").animate({ 
      backgroundColor: "#aa0000", 
      color: "#fff", 
      width: 500 
     }, 1000); 
     } else { 
     $("#effect").animate({ 
      backgroundColor: "#fff", 
      color: "#000", 
      width: 250 
     }, 1000); 
     } 
     state = !state; 
    }); 

    $('#button').easyAudioEffects({ 
     ogg : "audio/1_matrix.ogg", 
     mp3 : "audio/1_matrix.mp3", 
     eventType: "click" 
    }); 

    $("#button").selectable(); 
});

是否可以使用其他可點擊元素，使顏色動畫插件的工作，而不是按鈕？

我歡迎任何建議

來源

2016-09-19 Alan

ID應該是唯一的。您可以對所有相似的元素使用類，並使用類選擇器綁定事件。 – Tushar

這將是更漂亮的CSS類和轉換。 –

我修正了這個問題，但是當我在兩個插件中同時使用相同的選擇器時，它仍然不起作用。 – Alan

ID應該是這裏唯一的ID（按鈕）被複制。

<li id="button" class="ui-state-default ui-corner-all" >car 1</li> 
    <li id="button" class="ui-state-default ui-corner-all" >car 2</li> 
    <li id="button" class="ui-state-default ui-corner-all" >car 3</li>

來源

2016-09-19 15:03:57

我修正了這個問題，但是當我在兩個插件中同時使用相同的選擇器時，它仍然不起作用。這是插件之間使用相同的選擇器之間的某種衝突嗎？ – Alan

的jQuery插件的顏色沒有通過可選元素觸發

回答

相關問題