0

選択した値に基づいて特定のリンクを表示するいくつかの選択ボックスを持つページを作成しています。すべてをうまく表示/非表示にできますが、難しい方法でやっていることがわかっています。私はまだ JS/jQuery に非常に慣れていないので、スクリプトを 1 つの関数に凝縮する方法がわかりません (これは可能だと確信しています)。

ワーキングjquery：

$('.trqVerSelect').change(function () {
  $('.trqVersions .links').hide();
  $('.ver' + $(this).val()).show();
}).change();

$('.mwmVerSelect').change(function () {
  $('.mwmVersions .links').hide();
  $('.ver' + $(this).val()).show();
}).change();

上記が機能することを示すjsFiddleを次に示します。私が望んでいないのは、ページ上のすべての単一の選択ボックス インスタンスに対してこれらの関数を大量に構築することです。そのうちの 12 程度になります。

以下のコードを試してみたところ、ある程度は機能しますが、新しい選択を行うたびに、他のすべての選択が非表示になります。別の選択ボックスで新しい選択を行うときに、ユーザーが他の選択を保持できるようにしたい。

$('select').change(function () {
  $('.links').hide();
  $('.ver' + $(this).val()).show();
}).change();
4

2 に答える 2

1

HTML 構造を変更したり、追加のクラスを使用したりせずに (この回答の以前のバージョンで行ったように)、次のようなことができます。

$('.component').each(function(){
  var $component = $(this);
  $component.find('select').on('change', function(){
    $component.find('.links').hide();
    $component.find('.ver' + $(this).val()).show();
  }).change();
});

実際のデモ: http://jsfiddle.net/Rykus0/paGhk/4/

于 2013-01-10T20:27:37.057 に答える
1

これはうまくいくようです、http://jsfiddle.net/paGhk/1/

$('select').change(function () {
  $(this).parent().next().children().hide().filter(".ver" + $(this).val()).show();
}).change();

説明:

$('select').change(function () {
  $(this)  // <select />
    .parent() // <div />
    .next()  // <div />
    .children() // <p /><p />
    .hide() // hide them both
    .filter(".ver" + $(this).val()) // select the one with correct ver class
    .show(); // show it
}).change();
于 2013-01-10T20:08:31.357 に答える