jQuery構文エラー - 予期しないトークン

Question

デバッグしようとしていますが、構文エラーが発生し続けます。私はこれで何が起こっているのか分かりません。 "$ color_cell"にアタッチされているオブジェクトをクリックすると、atrr（ "id"）がblack_colors配列にプッシュされます。

誰かが私にこれを手伝ってもらえますか？前もって感謝します。

<script src="jquery-1.6.2.js"></script> 
<script type="text/javascript"> 

var ids = []; 
var black_colors = []; 
var blue_colors = []; 
var brown_colors = []; 
var gray_colors = []; 
var green_colors = []; 
var orange_colors = []; 
var pink_colors = []; 
var purple_colors = []; 
var red_colors = []; 
var teal_colors = []; 
var white_colors = []; 
var yellow_colors = []; 


$(document).ready(function($) { 


    $(".btnColor").click(function(){ 

     $(".color_cell").click(function(){ 

      if $(this).attr("id") == "black"{ 

      black_colors.push($(this).attr("id")); 

    } 

     }); 

    }); 

}); 

</script> 
<br> 
<br> 
    <button type="button" class="btnColor" id="black">Black</button>&nbsp; 
    <button type="button" class="btnColor" id="blue">Blue</button>&nbsp; 
    <button type="button" class="btnColor" id="brown">Brown</button>&nbsp; 
    <button type="button" class="btnColor" id="gray">Gray</button>&nbsp; 
    <button type="button" class="btnColor" id="green">Green</button>&nbsp; 
    <button type="button" class="btnColor" id="orange">Orange</button>&nbsp; 
    <button type="button" class="btnColor" id="pink">Pink</button>&nbsp; 
    <button type="button" class="btnColor" id="purple">Purple</button>&nbsp; 
    <button type="button" class="btnColor" id="red">Red</button>&nbsp; 
    <button type="button" class="btnColor" id="teal">Teal</button>&nbsp; 
    <button type="button" class="btnColor" id="white">White</button>&nbsp; 
    <button type="button" class="btnColor" id="yellow">Yellow</button>&nbsp; 

Answer 1

コードには多くの誤りがあります。

<script src="jquery-1.6.2.js"></script> 

はなるはずです：

<script type="text/javascript" src="jquery-1.6.2.js"></script> 

と：

$(document).ready(function($) { 

になる必要があります。

$(document).ready(function() { 

と：

if $(this).attr("id") == "black"{ 

はなるはずです：

if ($(this).attr("id") == "black") { 

そしてまた、あなたが正しくない2つの.click()ハンドラを入れ子にしています。

最後にあなたが持っているように：

<script type="text/javascript" src="jquery-1.6.2.js"></script> 
<script type="text/javascript"> 

var ids = []; 
var black_colors = []; 
var blue_colors = []; 
var brown_colors = []; 
var gray_colors = []; 
var green_colors = []; 
var orange_colors = []; 
var pink_colors = []; 
var purple_colors = []; 
var red_colors = []; 
var teal_colors = []; 
var white_colors = []; 
var yellow_colors = []; 

$(document).ready(function() { 
    $(".color_cell").click(function() { 
     // Can't see any color_cell class in your markup 
     // so no idea what you want to do if the DOM element with it is clicked 
    }); 

    $(".btnColor").click(function() { 
     if ($(this).attr("id") == "black") { 
      black_colors.push($(this).attr("id")); 
     } 
    }); 
}); 
</script> 

Answer 2

JavaScriptの構文が正しいとは思わない。試してみてください：

$(document).ready(function($) { 
    $(".btnColor").click(function(){ 
     $(".color_cell").click(function(){ 
      if ($(this).attr("id") == "black") { 
       black_colors.push($(this).attr("id")); 
      } 
     }); 
    }); 
}); 

Answer 3

代わりに：$（この）.ATTR（ "ID"）の場合を== "黒"

if ($(this).attr("id") == "black")