2013-08-03 53 views
0

我在採訪中做了一個小測試,使用HTML5 DOM創建了一個Rock,Paper,Scissors遊戲。在包含3個圖像的圖像選項下方是佔位符,用於顯示我(用戶)和計算機隨機挑選的內容。jQuery中的岩石,紙,剪刀

我對此有很多疑問:首先可以用jQuery編寫邏輯?事件處理程序只能做很多事情。我之前已經在JavaScript中製作了一個隨機的#生成器,所以我猜想使用jQuery和JS的混合...

下面是我擁有的示例 - >http://jsfiddle.net/Tryah85/JxKjk/。我在指定類和ID時遇到問題jQuery選擇器$("#scissors.pick");這是可行的嗎?

首先,沒有了jQuery的工作...這裏是一個片段......我知道代碼開始了這樣的:

$(document).ready(function() { 
    $("id-or-class-oreven-html-selector").click(function() { 
    }); 
}); 

我需要基本的jQuery的事件處理程序的多個方向。

而不是我使這個小提琴更簡單的圖像。基本上我也希望客戶端的結果在有瀏覽器隨機選取的同時顯示:因此打印電腦結果也是如此。然後最終顯示誰贏得了比賽的結果。

這個練習讓我深思我對jquery的瞭解。我認爲我對此有深刻的理解,但現在我不知道如何解決這個問題,任何人都可以提供幫助?

在此先感謝!

+3

jQuery是Javascript。這只是一個圖書館,可以使許多常見操作變得更容易。 – Barmar

+3

另外,小提琴中的代碼沒有意義。你正在聽一些帶有className'gesture'的元素來提供點擊事件,但是你沒有在你的html中使用它。另外,使用'#id.className'類型的選擇器是多餘的。該id必須是唯一的,所以只需使用'#id''。 –

+3

'if($(「#rock.pick」))'也沒有意義。 '$(「selector」)'的返回值始終是真的。你是否試圖測試被點擊的元素是否是「#搖滾」?寫這個的方法是'if($(this).is(「#rock.pick」))' – Barmar

回答

0

我改變了不少,也許這有助於

所有的if語句可能會大幅降低,但仍然不是很漂亮像

$("#yourMove .move").html($("h2", $(this).clone())) 
        .addClass($(this).attr('data-pick')); 

Updated fiddle

0
$("#scissors.pick"); is this doable? 

不,它不是可行的,如果你有一個唯一的ID,只要使用,

$("#scissors") 

由於埃文Trimboli的意見建議,

您正在收聽的一些具有className手勢的元素提供 單擊事件,但是您沒有在您的html中使用它。另外,使用 id.className選擇器類型是多餘的。該ID必須是唯一的,所以只需使用#id。

這裏是一個DEMO,那就說明你是如何判斷玩家的舉動,同樣也可以隨機挑選,PC的舉動,然後決定誰贏了。

上的任何標識的點擊應作爲,

$("#rock").click(function(){ 
    $("#yourMove").text("Your Move: Rock"); 
}); 

尋找更短的代碼?一條線做。

DEMO

$("#rock, #paper, #scissors").click(function(){ 
     $("#yourMove").text("Your Move: " + $(this).attr('id')); 
    });