カードの冒頭のマーク部分だけ取り出す方法（複数）
cards[i].charAt(0);
チャーアット 0番目の文字を1文字取り出せ
cards[i].substr(0,1);
サブストラ 0から1文字までの部分を切り出せ
cards[i].slice(0,1);
スライス これも0から1文字までの部分を切り出せ
//console.log('charAtでとりだした'+cards[i].charAt(0));//0番目を指定すると取り出すメソッド
//console.log('substrでとりだした'+cards[i].substr(0,1));//サブストラで取り出す
//console.log('sliceでとりだした'+cards[i].slice(0,1));//スライスで取り出す
カードを赤くする条件式はこのようになる
if (cards[i].charAt(0) == "♥" || cards[i].charAt(0) == "♦"){
}
--->test2.js（先生版）
$(function(){
var cards = [
'♠A','♠2','♠3','♠4','♠5','♠6','♠7','♠8','♠9','♠10','♠J','♠Q','♠K',
'♥A','♥2','♥3','♥4','♥5','♥6','♥7','♥8','♥9','♥10','♥J','♥Q','♥K',
'♣A','♣2','♣3','♣4','♣5','♣6','♣7','♣8','♣9','♣10','♣J','♣Q','♣K',
'♦A','♦2','♦3','♦4','♦5','♦6','♦7','♦8','♦9','♦10','♦J','♦Q','♦K'
];
$('#btn').on('click',function(){
console.log('hello');
//シャッフルする
var temp; //臨時格納
var r1,r2;
for (var i=0; i<300; i++){
r1 = Math.floor(Math.random()*cards.length);//一つ目の交換場所
r2 = Math.floor(Math.random()*cards.length);//２つめの
temp = cards[r1];
cards[r1] = cards[r2];
cards[r2] = temp;
}
console.log([cards]);
//出力
$('#stage').empty();
for (var i=0; i<5; i++){ //5枚取り出す
var ele = $('<div>').text(cards[i]); //変数eleに格納
//console.log('charAtでとりだした'+cards[i].charAt(0));//0番目を指定すると取り出すメソッド
//console.log('substrでとりだした'+cards[i].substr(0,1));//サブストラで取り出す
//console.log('sliceでとりだした'+cards[i].slice(0,1));//スライスで取り出す
//var mark = cards[i].slice(0,1);
//console.log(mark);
var ele = $('<div>').text(cards[i]);
if (cards[i].charAt(0) == "♥" || cards[i].charAt(0) == "♦"){
ele.css('color','red');//もし♥か♦ならeleのcssをフォント赤にする
}//そうでなければなにもしない
$('#stage').append(ele);
}
});
});
ふつうに
var ele = $('<div>').text(cards[i]);
で子要素をつくっておいて、
ele.css('color','red');
をあとから付け加えればいい。
ちなみに、このあとカードゲームにしたかったら、
カードを選択して交換できるとかなんとか。
そのとき、カードをbuttonにしておく必要はない。というのも、clickはdivにもきくらしい。
divがクリックされたとき背景色を薄青、変数に格納、みたいな流れで良いらしい。
？？var ele = $('<div>').text(cards[i]);//ここなんだけどdivにidを付与して生成するのはどうするのか？
>次に「id名」を変更したり追加する場合はどうしたら良いでしょうか？
実は、このような場合でも「attr()」メソッドを利用して処理を行うことができるので便利です！ 例えば次のように「id」が指定されていないp要素があるとします。
<p>サンプルテキスト</p>
このp要素に、新しく「text」というid名を指定するには、次のように記述します。
var id = $('p').attr('id', 'text');
console.log( id );
実行結果
[p#text, ......]
この例では、「$('p')」でp要素を指定し、「attr()」の第2引数に付与したい「id名」を記述することでp要素へ追加しているのが分かります。
