うーん・・・

【JavaScript】フィルターjquery使用時のボタンを画像のラジオボタン式にしたい

締切済

質問者：うぇい
質問日時：2016/01/19 15:18
回答数：2件

jqueryプラグインの「MixltUP」というソートやフィルター機能のあるプラグインを導入しているのですが、このプラグイン使用時のコントロールボタンをラジオボタン式にしたいと思いその方法についての質問です。

要素としては

カテゴリ1
　要素1　要素2　要素3　要素4　要素5　要素6

カテゴリ2
　要素1　要素2　…

カテゴリ3
　要素1　要素2　…

といった要素をラジオボタン式にしたいと思っています。
またラジオボタン式ではありますがラジオボタン式となる要素はすべて画像での表示でなおかつその要素が選択された場合には切り替え用の画像を表示したいと思っています。
（すべての要素画像は同一ではなく別個の画像でありラジオボタンのような選択方法でカテゴリ毎に一つの要素しか選択ができないといったものを想定しています。）

検索をしてもラジオボタンは元々すべて統一された画像が前提ですので思ったような物がみつからず質問という形を取らせて頂きました。
JSは初心者です。よろしければ回答と回答についての解説を入れて頂ければ経験値になりますので出来る範囲での回答やご助力をお待ちしております。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2016/01/20 17:46

ANo1です。

ANo1の最後にあげたスクリプトでのサンプルを作成してみました。
実際の実装がどうなっているのかまったくわからないため、かなりいい加減ですので、あくまでも考え方のヒントとしてご利用ください。

※ 動作を分かり易くするために、両方とも表示していますが、
　上段のものは実際には見せない想定です。
※ 下段の画像タイプのものをクリックすると、上段の
　　ラジオボタン（実際には見せない）が連動します。
※ キー操作等は無視していますが、実際にはキー操作にも
　　対応する必要があるかも。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>

<style type="text/css">
#hoge input { margin-left:2em; }
#hoge_clone img { width:20px; height:20px; margin-left:2em; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">
var setLinkage = (function(){

var link = function(n, r, s){
this.send = $(s + " img." + n);
this.recv = $(r + " input[name='" + n + "']");
}
link.prototype.handler = function(e){
var elm = $(e.target);
var idx = this.send.index(elm);
this.send.each(function(){
this.src = this.dataset["off"];
});
elm.attr("src", elm.attr("data-on"));
this.recv.eq(idx).click();
}

var setter = function(name, receive, send){
var obj = new link(name, receive, send);
$(send).on("click", "img." + name, (function(o){
return function(e){ o.handler(e); }
})(obj));
return obj;
}
return setter;
})();
</script>

</head>

<body>
<article>
<h4>ライブラリから参照する要素</h4>
<form id="hoge">
<p>カテゴリ-1<br />
<input type="radio" name="category1" value="c1-1" />要素1-1
<input type="radio" name="category1" value="c1-2" />要素1-2
<input type="radio" name="category1" value="c1-3" />要素1-3
</p>

<p>カテゴリ-2<br />
<input type="radio" name="category2" value="c2-1" />要素2-1
<input type="radio" name="category2" value="c2-2" />要素2-2
</p>
</form>
</article>

<hr>
<aside>
<h4>実際に見せる(操作する）疑似ラジオボタン</h4>
<div id="hoge_clone">
<p>カテゴリ-1<br />
<img class="category1" src="A.jpg" data-on="B.jpg" data-off="A.jpg" />要素1-1
<img class="category1" src="C.jpg" data-on="D.jpg" data-off="C.jpg" />要素1-2
<img class="category1" src="E.jpg" data-on="F.jpg" data-off="E.jpg" />要素1-2
</p>

<p>カテゴリ-2<br />
<img class="category2" src="B.jpg" data-on="C.jpg" data-off="B.jpg" />要素2-1
<img class="category2" src="D.jpg" data-on="E.jpg" data-off="D.jpg" />要素2-2
</p>
</div>
</aside>

<script type="text/javascript">
//連動を設定
setLinkage("category1", "#hoge", "#hoge_clone");
setLinkage("category2", "#hoge", "#hoge_clone");
</script>

</body>
</html>

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2016/01/20 16:43

「MixltUP」とかは知らないので、アイデアのみですが…

スクリプト等を利用して、画像でラジオボタンと同様の動作をするものを作成するのはそれほど難しくはありません。
検索すればたくさん見つかることと思います。（以下、一例です）
http://zxcvbnmnbvcxz.com/form-improvement-2-7/
http://web-terminal.blogspot.jp/2014/02/radio-im …
（個々のボタンが違う画像にはなっていませんが、方法としては同様で可能です。）

一方で、ご質問のケースでは、そのボタンが他のライブラリで使用している要素になっていると思いますので、そちらからの参照のされ方によってはライブラリが動作しなくなる可能性があります。
これを確実に解決するには、ライブラリを解析してカスタマイズするのが一番ですが、ものによっては結構面倒な作業になると予想します。

では、別の方法で何かないかと考えてみますと…
基本的には『もとのボタン要素の機能はそのままにしておいて、見え方とＵＩだけ独自に操作する』的な方法がありそうです。

一つの方法として、ＣＳＳで上記のようなことを実現するもの。
ググってみたところ以下のようなものがありました。
http://partisan.wwwxyz.jp/seed/2012/05/31/101313 …
（ＣＳＳまでライブラリ側の管理に任せなくてはならない場合は、使えないかも知れませんが）

もう一つの方法は、上記のＣＳＳと同様のことをスクリプトで行うもの。
考え方としては、
1）通常のラジオボタンでHTMLを作成し、ライブラリと連携させておく。
2）上とは別に画像ボタンのものを作成し、これを１の上に重ねて表示する。
3）２のクリックを取得して処理するスクリプトを別個に作成。
　（このスクリプトから、１のボタンをクリックしてあげる）
といった方法であれば、ライブラリとは干渉せずに、ご質問の動作が可能ではないかと想像します。