PeaceJet

証券会社で証券外務員をやりながら、マーケティングやデータ分析・UI/UX改善などを行っています。

はてなブログから他のブログへ移行します。

はてなブログからWordpressへ移行します。

このたび、はてなブログをやめて他のブログへ引っ越すことにしました。

意外と見にきていただいている方もいらっしゃるようでして、ニーズがあるのかなと思い。
独自ドメインを取得して、CMSを導入・運営することにしました。

現在、移行作業中となりますためリンク切れなどが発生する可能性もあります。
大変、ご迷惑をおかけすることをお詫び申し上げます。

【jQuery】$(this)とthisの違い

$(this)とthisの違い

TypeError: x.attr is not a function [詳細]

このような形で、怒られたことありませんか?

チェックボックスでチェックされた直近の親要素のIDを取得しようと思ったときに、こんなトラブル・・・。

$("input[name='checkbox']").change(function () {
    var s = this.closest('div');
    var t = s.attr("id");
    console.log(t);
});

f:id:PeaceJet:20170614112924p:plain

とりあえず、typeofで型をチェックしてみるもobjectだった。
調べてみると・・・。

オブジェクトのメソッドを扱う場合には、$(this)としないといけないようです。

$("input[name='checkbox']").change(function () {
    var s = $(this).closest('div');
    var t = s.attr("id");
    console.log(t);
});

参考にさせて頂きました。
jQueryの$(this)とthisの違い : ずっと工事中

【Javascript】クエリパラメータを取得してhiddenに入れる方法

JavaScriptで、URLのクエリパラメータを取得して、hiddenに値を格納したいというニーズがあったので紹介します。

たとえば、以下のようなURLがあり「hoge」と「huga」の値を取得したいと考えているとします。

http://www.example.com/index.htm?hoge=5454&huga=4545

自然に取ってくることが出来ないものなので、以下の関数を使用します。

var getUrlVars = function (){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

//戻り値は配列です。

準備が出来たので、まず、値を取得してみましょう!

//JavaScriptで取得する場合
var val_hoge = getUrlVars()['hoge'];
var val_huga = getUrlVars()['huga'];

//値を確認
console.log(val_hoge);
console.log(val_huga);

上記の操作で、値が取得できることが分かりましたので、これをhidden属性のinputにセットしてあげます。

<form name="form">
    <input type="hidden" name="elem1" value="" /> //hoge
    <input type="hidden" name="elem2" value="" /> //huga
</form>

上記のようなHTML文になっていた場合、以下のようにしてセットします。

document.form.elem1.value = val_hoge;
document.form.elem2.value = val_huga;

$("input[name='elem1']").val("hoge");
$("input[name='elem2']").val("huga");

これで、送信してあげればセットされた値が取れるはずです。
どの広告からの流入なのかとか、どのフォームが使用されたのかといった判定に使えるかもしれないですね。