UIでよく忘れること(メモ) #JavaScript

言葉の定義

属性
- ID, Classとかtypeとかdataとかのこと
属性値
- Classとかの値。class="hoge"のhogeのこと
タグ
- Divとかh1とかのこと
セレクタ
- セレクタはjQueryを記述する際の$()の中のことを指します

Javascript

配列に要素を加える

hoge.js

var Ary = [1,2];
Ary.push(3); // Ary = [1,2,3]

Jquery

クラス属性の値が"description t_hold"で、かつ、data-idが117のdivタグに、CSSを設定する

$('div[class="description t_bold"]').filter('[data-id="117"]').css('color', 'blue')

クラス名が"label~"のlabelタグに入っているstyle属性の値を取得する
属性値を取得するにはattr()を使う！

$('label[class="label_color color1"]').attr('style')

最高に参考になる
- http://www.hp-stylelink.com/news/2013/11/20131122.php

乱数を作る

https://www.sejuku.net/blog/22432

各文章にランダムな色を設定する

mtmx.js

//色変数定義
var kiiro = "rgb(255, 165, 0)"
var murasaki = "rgb(128, 0, 128)"
var pink = "rgb(219, 112, 147)"
var akafukai = "rgb(165, 42, 42)"
var midori = "rgb(0, 128, 0)"
var ao = "rgb(0, 0, 205)"
var aka = "rgb(220, 20, 60)"
var kuro = "rgb(0, 0, 0)"

//連想配列の作成
var colorHash = {
  0: kiiro,
  1: murasaki,
  2: pink,
  3: akafukai,
  4: midori,
  5: ao,
  6: aka,
  7: kuro
}

//8以下の乱数生成
function getRdm(){
  return Math.floor(Math.random()*8);
}

//ランダムに色を取得する関数の定義
function getRdmColor(){
  return colorHash[getRdm()];
}

//レスコンテンツ数の取得
//ブラウザで対象のタグを読み出すことが必要
var lth = $('div[class="description"]').length

//レスコンテンツ数に対して、ランダムで色を設定する
for (var i = 0; i < lth; i++ ){
  $('div[class="description"]').eq(i).css('color', getRdmColor())
}

//追記実際に動くやつ

var pre = 'input[name=color_'
var afi = ']'
//var ctx = pre + num + afi

function getRdm(){
  return Math.floor(Math.random()*7);
}

var lth = parseInt($('#count').text()) + 1

for (var i = 1; i < lth; i++ ){

  $(pre + i + afi ).eq(getRdm()).click();

}

即時関数

関数定義したと同時に実行する関数
書き方

hoge.js

//関数を()で囲み（）をつける。
(function(){})();
//これを変数に入れたりする。下は乱数を吐き出す変数を定義する例

var num = function getRdm(){
  return Math.floor(Math.random()*8);
}
//即時関数だと
var getRdm() = (function(){
  return Math.floor(Math.random()*8);
})();
//num だけで乱数が取得できる。

参考

forEach文は一気に吐き出す。