トップに関する質問ボタングループの活性、非活性の制御ができるJqueryのプラグイン化をしたい

編集履歴

質問編集履歴

最終的な成果物を追加しました。

2017/09/26 07:53

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -437,3 +437,157 @@
 ```
+###成果物
+```javascript
+//呼び出し側
+$(function() {
+    //グループセレクタ
+    var groupA = $('.mod-usual #selectRoast div');
+    var groupB = $('.mod-usual #selectBeans div');
+    //ボタンのenable・disableの切り替え
+　　　$(groupA).btnControl(1, 1, 0);
+　　　$(groupB).btnControl(1, 0, 0);
+});
+//プラグイン側
+$(function() {
+    //defaultは「定期商品」ボタングループは非表示
+    $('.groupB').css('display', 'none');
+    //「通常商品」と「定期商品」の表示切替
+    $('.btn-a').on('click', function() {
+        $('.mod-usual').show();
+        $('.mod-regular').hide();
+    });
+    $('.btn-b').on('click', function() {
+        $('.mod-usual').hide();
+        $('.mod-regular').show();
+    });
+    //選択状態のボタン
+    $("#groupA div, #groupB div").on("click", function() {
+        var id = $(this).parent();
+        var length = $(id).find(".button").length;
+        var num = $(id).find(this).data("item");
+        for (i = 0; i < length + 1; i++) {
+            $(id).find('.is-decision').removeClass('is-decision').addClass("is-cancel").fadeTo(500, 0.6);
+        }
+        $(id).find('[data-item="' + num + '"]').removeClass('is-cancel').addClass('is-decision').fadeTo(250, 1);
+    });
+});
+// enable,disableの判別
+(function($) {
+    $.fn.btnControl = function() {
+        var btnDecision = Array.prototype.slice.call(arguments);
+        return this.each(function(index, btnObjects) {
+            if (btnDecision[index]) {
+                $(btnObjects).addClass('button-click').removeClass('button-noclick');
+            } else {
+                $(btnObjects).removeClass('button-click').addClass('button-noclick');
+            }
+        });
+    };
+})(jQuery);
+```
+```css
+.button-click,
+.is-cancel {
+    border: 1px solid #332821;
+    color: #332821;
+    cursor: pointer;
+    box-shadow: 0px 0px 5px #332821;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    opacity: 0.8 !important;
+}
+.button-noclick {
+    pointer-events: none;
+}
+.is-decision {
+    background-color: #eeeeee;
+}
+```

試したこと2を編集しました。

2017/09/26 07:53

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -386,7 +386,7 @@
-            this.each(function(btnObjects) {
+            this.each(function() {
                 if (btnDecision == 1) {

試したこと2を追記しました。

2017/09/21 08:45

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -325,3 +325,115 @@
     });
 ```
+###試したこと2
+```javascript
+    $(function() {
+        //defaultで「商品グループB」ボタングループは非表示
+        $('.groupB').css('display', 'none');
+        //「商品グループA」と「商品グループB」の表示切替
+        $('.btn-a').on('click', function() {
+            $('.groupA').show();
+            $('.groupB').hide();
+        });
+        $('.btn-b').on('click', function() {
+            $('.groupA').hide();
+            $('.groupB').show();
+        });
+        //ボタンの非活性
+        function btnDisable(e) {
+            e.preventDefault();
+            return false;
+        }
+    });
+    (function($) {
+        //プラグイン定義
+        $.fn.btnControl = function(btnDecision) {
+            this.each(function(btnObjects) {
+                if (btnDecision == 1) {
+                    $(this).addClass('button-click');
+                } else if (btnDecision == 0) {
+                    element.onmousedown = function (e){event.preventDefault()};
+                }
+            });
+            //【確認用】クリックイベントがキャンセルされているか
+            $(this).click(function() {
+                alert('クリックイベントチェック');
+            });
+        };
+    })(jQuery);
+    //ターゲット
+    var groupA = $('.groupA #selectOption1 div');
+    $(function() {
+        $(groupA).btnControl(1, 0, 0);
+    });
+```

試したことを編集しました。

2017/09/21 08:41

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -258,13 +258,13 @@
-  //プラグイン側
+    //プラグイン側
     (function($) {
         //プラグイン定義
-        $.fn.btnControl = function(btnControl) {
+        $.fn.btnControl = function(btnDecision) {
@@ -278,23 +278,19 @@
-            function btnControl(btnObjects) {
+            return this.each(function(btnObjects) {
-                for (var $i = 0; $i < arguments.length; $i++) {
-                    if (btnDecision == 1) {
+                if (btnDecision == 1) {
-                        $(this).addClass('button-click');
+                    $(this).addClass('button-click');
-                    } else if (btnDecision == 0) {
+                } else if (btnDecision == 0) {
-                        return false;
+                    return false;
-                    }
                 }
-            }
+            });
@@ -308,17 +304,15 @@
-            //メソッドチェーン対応(thisを返す)
-            return (this);
         };
     })(jQuery);
-  //呼び出し側
+    //呼び出し側
     var groupA = $('.groupA #selectOption1 div');
@@ -330,6 +324,4 @@
     });
 ```

試したことを編集しました。

2017/09/21 06:46

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -256,52 +256,80 @@
 ```javascript
-    //プラグイン側
+  //プラグイン側
     (function($) {
-            //プラグイン定義
+        //プラグイン定義
-            $.fn.btnControl = function(btnProp) {
+        $.fn.btnControl = function(btnControl) {
-                //対象のセレクタの中のデータ属性を探したい
+            //enable,disableの判別
-                var btnProp;
+            var btnDecision;
+            //対象のボタンを格納
+            var btnObjects = $(this).data('item');
+            function btnControl(btnObjects) {
+                for (var $i = 0; $i < arguments.length; $i++) {
-                if (btnProp == 1) {
+                    if (btnDecision == 1) {
-                    $(this).addClass('button-click');
+                        $(this).addClass('button-click');
-                } else if (btnProp == 0) {
+                    } else if (btnDecision == 0) {
-                    e.preventDefault();
-                    return false;
+                        return false;
+                    }
                 }
+            }
+            //【確認用】クリックイベントがキャンセルされているか
+            $(this).click(function() {
+                alert('クリックイベントチェック');
+            });
-                //メソッドチェーン対応(thisを返す)
+            //メソッドチェーン対応(thisを返す)
-                return (this);
+            return (this);
-            };
+        };
     })(jQuery);
-    </script>
-    //呼び出し側
+  //呼び出し側
+    var groupA = $('.groupA #selectOption1 div');
     $(function() {
-        $('.groupA #selectOption1 div').btnControl(1);
+        $(groupA).btnControl(1, 0, 0);
     });
 ```

試したことを編集しました

2017/09/21 04:26

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -256,32 +256,52 @@
 ```javascript
+    //プラグイン側
-(function($) {
+    (function($) {
+            //プラグイン定義
-    $.fn.groupAop1Control = function(decision) {
+            $.fn.btnControl = function(btnProp) {
+                //対象のセレクタの中のデータ属性を探したい
-        var decision = 0;
+                var btnProp;
-        if(decision = 0){
+                if (btnProp == 1) {
+                    $(this).addClass('button-click');
+                } else if (btnProp == 0) {
-        	e.preventDefault();//クリックイベントをキャンセル
+                    e.preventDefault();
-        	return false;
+                    return false;
-        }
+                }
-        else if(decision = 1){
+                //メソッドチェーン対応(thisを返す)
-        	$(this).addClass('button-click');//ボタンが「enable」、選択できる状態のクラス
-        }
-        return (this);
+                return (this);
-    };
+            };
-})(jQuery);
+    })(jQuery);
+    </script>
+    //呼び出し側
+    $(function() {
+        $('.groupA #selectOption1 div').btnControl(1);
+    });
 ```

困っているところ・躓いているところと、試したことについてを追記をしました。

2017/09/20 15:38

投稿

freedomman

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,15 @@
+###困っているところ・躓いているところ
+データ属性が連番で増えていくこと想定したプログラムを組みたいのですが、
+繰り返し処理を複数要素に対してかけるところから躓いております。
+また、関数の引数に対しての条件分岐の方法も模索しております。
 ###前提・実現したいこと
 ボタングループの活性、非活性の制御ができるJqueryのプラグイン化を考えております。
@@ -239,3 +251,37 @@
 }
 ```
+###試したこと
+```javascript
+(function($) {
+    $.fn.groupAop1Control = function(decision) {
+        var decision = 0;
+        if(decision = 0){
+        	e.preventDefault();//クリックイベントをキャンセル
+        	return false;
+        }
+        else if(decision = 1){
+        	$(this).addClass('button-click');//ボタンが「enable」、選択できる状態のクラス
+        }
+        return (this);
+    };
+})(jQuery);
+```