JavaScript小ネタ集

1 minuteReading Time

JSONデータや配列のキーを条件にして、条件に合う配列を作るfilter関数の使い方

var json_string = JSON.parse('<?php echo $json_string; ?>;');   //PHPから配列データを受け取る
//配列のキーとして「pl_color」がありその中に「ゴールド」がある
var color = 'ゴールド' //ゴールドと同じものを抽出

var filter_color_ary = json_string.filter(x =>; x.pl_color === color)

//又は

var filter_color_ary = json_string.filter(function(item){
    return item.type=="color";         
});

JSONデータを読み込み、キーを指定して1行ずつデータを取得する

var json_string = JSON.parse('<;?php echo $json_string; ?>;');   //PHPから配列データを受け取る
  json_string.forEach( function( value ) {
    console.log( value.capacity ); //capacityというキーのでーたを取得
  });

1番目を指定して読み取るのは簡単

data= json[0]['key_name']; //たとえ1件しかなくても1件目を取得と明示する必要がある

jQueryからHTMLの要素を制御する

jQueryのメソッド「append()」を使います。削除するには「remove」を使いますが、リストの内容を削除するには、子要素を削除する「empty()」メソッドを使います。

$('#volume_list').append('<li>リスト追加</li>');  //#volume_listは要素のid又はclassに#を追加

$('#volume_list').empty(); // volume_listのid又はclassの子要素を削除

JavaScriptでは、「appendChild」メソッドを使うと同じ事ができます。

var list = document.createElement("li");
abe.setAttribute("id", "volume_list");
abe.innerHTML  = "リスト追加";
var volume_list = document.getElementById("volume_list");
volume_list.appendChild(list);

HTML要素の値を取得する

color = $('input[name="color"]:checked').val(); //nameが「color」の選択されているラジオボタン

※クォーテーションとダブルクォーテーションに注意。

valueの値を取り出す場合と、表示されているテキストを取り出す場合の違い

<select name="color">
    <option value='gold'>金</option>
    <option value='red'>赤</option>
</select>
$('[name=color]').change(function() {
    // 選択されているvalue属性値を取り出す
    var val = $('[name="color"]').val();
    console.log(val); // 出力:gold
    // 選択されている表示文字列を取り出す
    var txt = $('[name="color"] option:selected').text();
    console.log(txt); // 出力:金
});

JSONデータをキーごとに1っ件ずつ読み込む

PHPでデータベースから読み込んだデータをJSON形式でJavaScriptに渡して、プルダウンを作る処理。

var data = [
    { "pl_model": "iPhone" },
    { "pl_model": "iPad" },
    { "pl_model": "iWatch" }
]

var obj = JSON.parse(data);
$('#model').append($('<option>').val('').text('モデルを選択してください'));
for(var i in obj){
	$("#model").append("<option>" + obj[i].pl_model + "</option>");
}

参考サイトURL
jQueryでjsonデータを扱ってみる【入門編】

jQueryで、CSSの書き換えやイベントの削除変更など

CSSの書き換え

//一つの時
$('.add-data-to-cart').css('color','#fff');

//2つ以上の時
$('.add-data-to-cart').css({
   'background-color' : '#777',
   'border-bottom' : '0px',
});

onclickイベントの削除

<button class="add-data-to-cart" onclick="addDataToCart()">カートに入れる</button>
//削除
$('.add-data-to-cart').get(0).onclick = '';

0
0
39
1 minuteReading Time

こんにちは。 グローバルリンクです。

KbxBotIcon