jqueryで1回目と2回目を分けたい

Question

jqueryで1回目と2回目を分けたいのですが、次のコードは何がおかしいか教えていただけませんでしょうか？？

(function($){

  // .btnをクリックしたときの機能だよ
  $('body').on("click",'.btn',function(){
	  
    // まずbodyに.accessをつけて
    $.cookie("access",$('body').addClass('access'));  
	
        // 1回目（.accessなし）ならこのアラート
        if($.cookie("access") == undefined) {
	  	alert('1回目の.btnクリックだね。');	 

        // 2回目以降（.accessあり）ならこのアラート
        } else {
	  	alert('2回目以降ですよ。');
        }
	
  });

})(jQuery);

//ライブラリ「jquery.cookie.js」の中身全部
(function($){ 
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD (Register as an anonymous module)
		define(['jquery'], factory);
	} else if (typeof exports === 'object') {
		// Node/CommonJS
		module.exports = factory(require('jquery'));
	} else {
		// Browser globals
		factory(jQuery);
	}
}(function ($) {

	var pluses = /+/g;

	function encode(s) {
		return config.raw ? s : encodeURIComponent(s);
	}

	function decode(s) {
		return config.raw ? s : decodeURIComponent(s);
	}

	function stringifyCookieValue(value) {
		return encode(config.json ? JSON.stringify(value) : String(value));
	}

	function parseCookieValue(s) {
		if (s.indexOf('"') === 0) {
			// This is a quoted cookie as according to RFC2068, unescape...
			s = s.slice(1, -1).replace(/\"/g, '"').replace(/\\/g, '\');
		}

		try {
			// Replace server-side written pluses with spaces.
			// If we can't decode the cookie, ignore it, it's unusable.
			// If we can't parse the cookie, ignore it, it's unusable.
			s = decodeURIComponent(s.replace(pluses, ' '));
			return config.json ? JSON.parse(s) : s;
		} catch(e) {}
	}

	function read(s, converter) {
		var value = config.raw ? s : parseCookieValue(s);
		return $.isFunction(converter) ? converter(value) : value;
	}

	var config = $.cookie = function (key, value, options) {

		// Write

		if (arguments.length > 1 && !$.isFunction(value)) {
			options = $.extend({}, config.defaults, options);

			if (typeof options.expires === 'number') {
				var days = options.expires, t = options.expires = new Date();
				t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
			}

			return (document.cookie = [
				encode(key), '=', stringifyCookieValue(value),
				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
				options.path    ? '; path=' + options.path : '',
				options.domain  ? '; domain=' + options.domain : '',
				options.secure  ? '; secure' : ''
			].join(''));
		}

		// Read

		var result = key ? undefined : {},
			// To prevent the for loop in the first place assign an empty array
			// in case there are no cookies at all. Also prevents odd result when
			// calling $.cookie().
			cookies = document.cookie ? document.cookie.split('; ') : [],
			i = 0,
			l = cookies.length;

		for (; i < l; i++) {
			var parts = cookies[i].split('='),
				name = decode(parts.shift()),
				cookie = parts.join('=');

			if (key === name) {
				// If second argument (value) is a function it's a converter...
				result = read(cookie, value);
				break;
			}

			// Prevent storing a cookie that we couldn't decode.
			if (!key && (cookie = read(cookie)) !== undefined) {
				result[name] = cookie;
			}
		}

		return result;
	};

	config.defaults = {};

	$.removeCookie = function (key, options) {
		// Must not alter options, thus extending a fresh object...
		$.cookie(key, '', $.extend({}, options, { expires: -1 }));
		return !$.cookie(key);
	};

}));
})(jQuery);

Answer 1

まずcookieに値をセットしてから、値がセットされているかどうか調べているようなので、1回目でもif文通らないと思います。

Comments

[退会済みユーザー]

こんばんは。いつもありがとうございます。

んんんっと、どういうことですか？笑

>まずcookieに値をセットして

というのは次の部分ですよね？

// まずbodyに.accessをつけて
$.cookie("access",$('body').addClass('access'));

そして

>値がセットされているかどうか調べている

というのは、if…else…の部分ですよね？

すると、仰っているのは、「上の２つの順番が逆だよ。」と、いうことでは…ないですよね？(;´･ω･)

[Lhankor_Mhy]

「上の２つの順番が逆だよ。」と、いうことです。

1. ボタンを押されたら、箱の中に「押したよ」と書かれた紙を入れます。
2. 箱の中身を見て「押したよ」という紙がなかったら「1回目だよ！」と叫びます。
3. 箱の中身を見て「押したよ」という紙があったら「2回目以降だよ！」と叫びます。

この人が「1回目だよ！」と叫ぶことって、あると思います？

[退会済みユーザー]

物事には順序があるのですね(っ´∀｀)っ
いつもご指導ありがとうございます。

[退会済みユーザー]

解決しました。夜分にたいへん失礼いたしました。どうもありがとうございます。

Answer 2

cookie の仕組みを理解していないことによる問題と言っていいかと思います。
そもそも、cookieはブラウザからサーバーへリクエストが送信された時に値が送られます。

提示のコードでは1回目と2回目の間にリクエストは生じないため、意図したような動きにはなりません。

また、clickイベントが起きた時に値を書き換えていることもあって、「訪問回数」を表示するものではなく、「クリック回数」を表現するものになっています。

Comments

[退会済みユーザー]

こんばんは。ありがとうございます。

>「訪問回数」を表示するものではなく、「クリック回数」を表現する

まさにこれを意図していたので、質問文は編集した方がよさそうですね。
ご指摘ありがとうございます。

>提示のコードでは1回目と2回目の間にリクエストは生じないため、意図したような動きにはなりません。

そうなのですね。ご指摘ありがとうございます。