單擊遍歷點擊

我正在創建演示文稿。有一個div元素可以改變字體大小。有兩個按鈕可以增加陣列中的顏色，另外一個按鈕可以減少它。單擊遍歷點擊

HTML：

<input type="button" id="up" value="change color up"> 
    <input type="button" id="down" value="change color down"> 

    <div id="myValue"> 
    VALUE 
    </div>

的Jquery：

 fancyColors = { 
      1: "#9c9e9f", 
      2: "#848e6f", 
      3: "#778861", 
      4: "#7da75d", 
      5: "#7fa433", 
      6: "#97bf0d" 
     }; 


    $(function() { 

     var i; 
     var valuE = $('#myValue'); 
     var getSize = $('#myValue').css("font-size"); 
     var getColor = $('#myValue').css("color"); 
     var down = $('#down'); 
     var up = $('#up'); 



     valuE.css("color", fancyColors[1]); 
     down.on("click",function() { 
      valuE.css("color", fancyColors[i]); // do i-- 
     }); 


     up.on("click", function() { 
      valuE.css("color", fancyColors[i]); // do i++ 
     }); 
    });

我有一個循環，但是這並沒有爲我工作了。我想對於一個更有經驗的人來說應該是相當容易的。謝謝你的時間。

來源

2014-03-31 ALEX_AME

'fancyColors'不是一個數組。 – Satpal

'$（'＃up'）'不起作用，因爲'up'不是id。 'down'也一樣。 –

@Satpal：你的論點無效：P – techouse

正確匹配使你的HTML作爲

<input type="button" id="up" value="change color up"> 
<input type="button" id="down" value="change color down"> 
<div id="myValue">VALUE</div>

而且您的js：

var fancyColors = [ 
    "#9c9e9f", 
    "#848e6f", 
    "#778861", 
    "#7da75d", 
    "#7fa433", 
    "#97bf0d"]; 


$(function() { 

    var i = 0; 
    var valuE = $('#myValue'); 
    var getSize = valuE.css("font-size"); 
    var getColor = valuE.css("color"); 
    var down = $('#down'); 
    var up = $('#up'); 



    valuE.css("color", fancyColors[1]); 
    down.on("click", function() { 
     valuE.css("color", fancyColors[i]); 
     i++ // do i-- 
    }); 


    up.on("click", function() { 
     valuE.css("color", fancyColors[i]); 
     i++ // do i++ 
    }); 
});

現場演示：http://jsfiddle.net/jY24d/

來源

2014-03-31 07:34:33

謝謝你的時間。作品真的很好:) –

歡迎。它是我的榮幸;） –

$('#down').click(function(){ i++; });

你需要一個id屬性添加到您的下輸入：

<input type='button' id='down'>

這jQuery將與底本

來源

2014-03-31 07:27:59

我沒有在這裏添加它，但在我的源代碼中它是正確的。爲失誤抱歉。 –

請問您可以粘貼完整的代碼。我可能錯過了一些東西。謝謝 –

@ auL5agoi，anoop爲我做了:) –

fancyColors = { 
       1: "#9c9e9f", 
       2: "#848e6f", 
       3: "#778861", 
       4: "#7da75d", 
       5: "#7fa433", 
       6: "#97bf0d" 
      }; 

    $(function() { 

     window.colorIndex=1; 
     var valuE = $('#myValue'); 
     var getSize = $('#myValue').css("font-size"); 
     var getColor = $('#myValue').css("color"); 
     var down = $('#down'); 
     var up = $('#up'); 
     valuE.css("color", fancyColors[1]); 
     down.on("click",function() { 

     if(colorIndex<1){colorIndex=6;} 
      valuE.css("color", fancyColors[--colorIndex]); // do i-- 
     }); 


     up.on("click", function() { 

     if(colorIndex >6){colorIndex=1;}    
      valuE.css("color", fancyColors[colorIndex++]); // do i++ 
     }); 
    });

試試這個:)

來源

2014-03-31 07:37:30

嘗試這樣

fancyColors = [ 
    "#9c9e9f", 
    "#848e6f", 
    "#778861", 
    "#7da75d", 
    "#7fa433", 
    "#97bf0d" 
]; 
var index = 0; 
$("#up").click(function() { 
    index++; 

    var i = fancyColors.length % index; 
    $("#myValue").css("background-color", fancyColors[i]); 
}); 
$("#down").click(function() { 
    index--; 
    var i = fancyColors.length % index; 

    $("#myValue").css("background-color", fancyColors[i]); 
});

Demo

來源

2014-03-31 07:37:48

你是學生吧？好吧，我不會做你的功課你，但我給你以下建議：

按鈕需要IDS
迭代器（我）需要一個值的函數首先執行
前你不能定義click事件調用函數本身

內部功能，但我敢肯定，在你的演講材料，反正...

來源

2014-03-31 07:40:49 user3451194

感謝您的提示。 –

單擊遍歷點擊

回答

相關問題