2

繰り返しの質問ではないことを願っていますが、繰り返しの質問の場合は、回答としてリンクを投稿してください。

いくつかのオプションを含む上部に選択ドロップダウンがあり、その下にいくつかのリンクがあるいくつかのdivを含むWebサイトを作成する必要があります。

選択ボックスで選択したオプションに応じて、適切にラベル付けされたリンクが強調表示されます。

基本的な構造は次のとおりです。

<select>
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
  <option value="o4">Option 4</option>
</select> 

<div>
  <a href="#" class="o1">Link A</a>
  <a href="#" class="o2">Link B</a>
  <a href="#" class="o3">Link C</a>
  <a href="#" class="o4">Link D</a>
</div>

<div>
   <a href="#" class="o1">Link A</a>
   <a href="#" class="o2">Link B</a>
   <a href="#" class="o3">Link C</a>
   <a href="#" class="o4">Link D</a>
</div>

このプロセスには.addClass（）.removeClass（）と.change（）が含まれることはわかっていますが、すべてのdivで動的に機能するようにすべてをまとめる方法がわかりません。

前もって感謝します。

4

4 に答える 4

3

リンクする：

$('select').on('change', function(){
    var klass = this.value;
    $('.highlight').removeClass('highlight');
    $('a.'+klass).addClass('highlight');
});
于 2012-05-31T19:25:37.010 に答える
1 
$('select').on('change', function() {      // binding change event for select
                                           // fires when select box change

  var mycls = this.value;                  // getting the value of select 
                                           // box after change



  $('a:not(".'+ mycls +'")')               // select <a> tag that has no 
                                           // class same as select box value
              .removeClass('some_class');  // and remove highlight 
                                           // class form that <a>

  $('a.' + mycls)                          // select the <a> with class 
                                           // same as select box value
             .addClass('some_class');      // and adding highlight class
});

最初にリンクを強調表示するには、最初の変更をトリガーするだけです

$('select').on('change', function() {
  var mycls = this.value;
  $('a:not(".'+ mycls +'")').removeClass('some_class');
  $('a.' + mycls).addClass('some_class');
}).change(); // here the initial change event triggered

デモ

于 2012-05-31T19:25:08.963 に答える
0

選択リストにselectidなどのIDを指定し、.highlightというクラスがあるとすると、次のようなことができます。

$('#selectid').change(function(){

  $('*').removeClass('highlight');

  $('.'+$(this).val()).addClass('highlight'); 

});

私は上記をテストしていませんが、それはあなたを正しい軌道に乗せるはずです。

于 2012-05-31T19:30:27.690 に答える
0

あなたはすでに最後の文の質問に答えたようですが、これが次のステップです。

.change（）イベントハンドラーを選択ボックスに追加する必要があります。

$("select").change(function () {

});

次に、それが発生した場合でも、選択した値を読み取り、同じ名前を付けたので、そのクラスにスタイルを適用します。

$("select").change(function () {
    $( "." + $(this).attr("value") ).css("background", "#ccc");
}
于 2012-05-31T19:27:50.353 に答える