簡體   English   中英

通過“ for循環”每秒鍾更改顏色

[英]Change color for every second ul li with a “for loop”

我正在代碼學院學習javascript,到目前為止,我了解很多事情是如何工作的。 可悲的是,他們沒有解釋如何定位元素顏色或定位元素/選擇器/ div。

我正在測試我的知識。 我正在嘗試通過使用for循環為第二個列表項賦予紅色。

我該怎么做呢?

var listColor = function(){
    var color = style.("red");
    var list = getElementsByTagName("li");
    for (i = 0; i < list.length; i + 2;) {
    list === color   
    }
    ];
    listColor();

這是我的http://jsfiddle.net/Lr8nZ/15/

更新了JSfiddle,但仍無法正常使用http://jsfiddle.net/Lr8nZ/23/

所以基本上:

紅,黑,紅,黑

這樣的事情。

  var listColor = function(){

  var list = document.getElementsByTagName("li");
  for (i = 0; i < list.length; i++) {
    if(i%2==0)
    list[i].style="color:red";
    else
        list[i].style="color:blue";

   }
 }
 listColor();

嘗試這個

    <html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">



    $(document).ready(function(){
        index=1;    
        $("#temp li").each(function(){
            if(index%2==0)
            {
                $(this).css("color","red")
            }
            index++;
        });
    })

    </script>
<style>

</style>
</head>

<body>

<ul id='temp'>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

</body>
</html>

您有一些語法錯誤,但是您可以這樣做:

var listColor = function() {
  var list = document.getElementsByTagName('li');

  for (var i = 0, l = list.length; i < l; i++) {
    if (i % 2 === 0) {
      list[i].style.color = 'red';
    }
  }
};

// Or...

var listColor = function() {
  var list = document.getElementsByTagName('li');

  for (var i = 0, l = list.length; i < l; i += 2) {
    list[i + 1].style.color = 'red';
  }
};

listColor();

當增加i時,請確保使用i++i += 1更新其值,否則將創建一個無限循環。

i % 2使用%模量運算符。 這是將兩個數字相除得到的余數。 偶數除以2,因此余數將為0,我們將對其進行檢查。

您要查找的屬性稱為style 它具有一個名為color的屬性,在這種情況下,我們將其設置為字符串'red'

嘗試使用控制台查看代碼中的錯誤。 這是任何js編碼器都必不可少的工具。 這是更新的小提琴http://jsfiddle.net/Lr8nZ/24/

您注意到的第一件事是style.color('red') 為了使這行成為有效的js,必須定義一個樣式對象。 否則,它將在window上搜索它,這總是導致混亂。

另一件事是注意在循環的第三個條件下我們如何實際上必須將新值分配給i 僅提及i+2將不起作用,因為i將保持不變,從而導致無限循環。

同樣,啟動Web控制台。 通常,您可以通過右鍵單擊頁面>檢查> Web控制台來執行此操作。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM