javascriptのfocusについて

Question

下記サイトを参考にセレクトボックスの情報とマッチするものを表示させるものを作りました。
http://webkaru.net/jquery-plugin/focused/

フォーカスされたものは確かに出るのですが、「全件表示」を行いたいのです。
つまり、value値にallというものを入れて、これが選択された時は全部表示されるようにという流れです。

あくまでもfocusは絞込表示として利用したいだけなので。。。
何かいい方法がありましたらご教授願います。

使用しているjQueryのバージョンは、2.1.4です。

Answer 1

jQuery セレクタの使い方次第で何とでもなりますね。

例えば、jQuery のセレクタには、前方一致でマッチさせることが可能です。
特定の属性に対して決まったフォーマットを用意しておけば、全体選択が可能です。

仮に絞り込み用の属性値に下記のように設定しておけば、

<div data-focus="format-red"></div>
<div data-focus="format-blue"></div>
 ...

下記の形で全件取得できるはずです。（たぶん）

$("[data-focus^=format]").show();

参考サイト
http://semooh.jp/jquery/api/selectors/%5Battribute+start+value%5D/
http://hozunomiya.xyz/?p=66

もしくは、親要素が特定できれば、その子要素を表示するという方法もあります。
どのやり方が効率が良いかは、HTMLの構造次第になります。

Comments

[misonya]

前方一致が出来るということに感激しましたが…js初心者のためもう少し詳しく教えていただけると幸いです。
この全色表示が選択されているときは、すべての項目が表示されていて欲しいのです。

<div id="color">
<select name="focus">
<option value="focus-all">全色表示</option>
<option value="focus-red">赤</option>
<option value="focus-orange">橙</option>
</select>

<p data-focus="focus-red">赤です</p>
<p data-focus="focus-orange">橙です</p>
</div>

<script>
$(function domReady() {
$('#color').focused();
});
</script>

domReadyのことなど調べてみたのですが、どう記述したらでてくれるのかわからず苦戦しています…

[usk]

たぶん、以下の感じでいけないかな・・・。
値の評価方法 (if 文の条件分岐・処理方法) などは、あくまで参考程度にしてください。

<div id="color">
<select name="focus">
<option value="focus-all">全色表示</option>
<option value="focus-red">赤</option>
<option value="focus-orange">橙</option>
</select>

<p data-focus="focus-red" style="display:none">赤です</p>
<p data-focus="focus-orange" style="display:none">橙です</p>
</div>

<script>
// A. 画面読み込み後 (正確にはDOM構築後) に実行する Javascript
$(function() {

// B. SELECT 項目が変更された場合に実行する
$('[name=focus]').change(function() {

if (this.value == 'focus-all') {
// 全件表示
$('[data-focus^=focus]').show();
} else {

// 表示対象をすべて非表示
$('[data-focus^=focus]').hide();

// 赤・橙の表示
$('[data-focus='+this.value+']').show();
}

}); // end of B

// 初期表示実行
$('[name=focus]').change();

}); // end of A
</script>

ちなみに。。。
コメントに例として挙げていただいたJavascript は、『画面読み込み完了時（DOM構築完了時）に、div (id=color) 要素にフォーカスを当てたい。』ということでしょうか？

その場合、下記のコードになります。

---
<script>
$(function () { // ← 関数名は必要ありません
$('#color').focus(); // ← フォーカスを当てたいなら focus() でOK
});
</script>
---

[misonya]

とてもわかりやすく説明してくださりありがとうございます。
おかげさまでやりたかったことがそのままできました！
ありがとうございました！