JavaScriptを無効にする方法

Question

これは実際には2つの問題です。

1）自分のリンクをループしてJavaScriptを無効にしているうちに問題が発生しています。私は "下"と呼ばれるdiv idからのリンクをつかむ必要があり、その中の "nhl"とのリンクは無効にする必要がありますが、言いたいことはありません。これまで私は持っている：外部jsファイル。

onload = function() { 
    var links = document.getElementById("bottom").getElementsByTagName("a"); 

    for(i = 0; i < links.length; i++) { 
     if (links[i].indexOf("nhl") >= 0) { 
      links[i].onclick = function() { 
       return false; 
      } 
     } 
    } 
} 

htmlファイル：

<div id="bottom" class="change"> 
<a href="http://www.nhl.com/">www.nhl.com</a> 
<a href="https://www.youtube.com/">www.youtube.com</a> 
<a href="http://www.w3schools.com/">www.w3schools.com</a> 
</div> 

2）私のjsファイル現時点でのようなカップルの機能が含まれます。

function changeColorOnMouseIn() { 
    this.style.color = "red"; 
} 

function changeColourOnMouseOut() { 
    this.style.color = "black"; 
} 

onload = function() { 
    var divClasses = querySelectorAll(".change p"); 

    for(i = 0; i < divClasses.length; i++) { 
     divClasses[i].onmouseover = changeColorOnMouseIn; 
     divClasses[i].onmouseout = changeColorOnMouseOut; 
    } 
} 

は、私の質問は、私は、このようにそれを行うには継続すべきである場合、または代わりに次のようにする：

onload = function() { 
    var divClasses = document.querySelectorAll(".change p"); 

    for(i = 0; i < divClasses.length; i++) { 
     divClasses[i].onmouseover = function() { 
      this.style.color = "red"; 
     } 
    } 
} 

また、forループを使ってすべてのことを行い、onload関数で "myFunctionName（）"を呼び出すだけの関数を作成する必要がありますか？違いは何ですか？そして、どんな状況で、あなたは他の人と比べてどちらをやりますか？

ありがとうございました！

Answer 1

は最初の部分、私はあなたのループ内で小さなミスを発見した、あなたはリンクを作成する必要があります[i]を.href.indexOf（ "NHL"）

onload = function() { 
var links = document.getElementById("bottom").getElementsByTagName("a"); 

    for(i = 0; i < links.length; i++) { 
     if(links[i].href.indexOf("nhl") >= 0) {// CHANGE 
      links[i].onclick = function() { 
       return false; 
       } 
      } 
    } 
} 

第二部についてはますそれでもJavaScriptでそれをしたい場合は簡単にCSS

.change p { 
    color: black; 
} 
.change p:hover{ 
    color: red; 
} 

でそれを行うことができ、このアプローチが優れている

function changeColorOnMouseIn() { 
    this.style.color = "red"; 
} 

function changeColourOnMouseOut() { 
    this.style.color = "black"; 
} 

onload = function() { 
    var divClasses = querySelectorAll(".change p"); 

    for(i = 0; i < divClasses.length; i++) { 
     divClasses[i].onmouseover = changeColorOnMouseIn; 
     divClasses[i].onmouseout = changeColorOnMouseOut; 
    } 
} 

ここでこのアプローチがより良い理由は、以下のコードではn個の無名関数が作成されるため、10個の項目に対してループが実行される場合は10個の匿名関数が存在するため、関数宣言。

divClasses[i].onmouseover = function() { 
    this.style.color = "red"; 
}