CSSクラスを更新する方法DropDown JQueryを動的にonclick -- javascript フィールド と jquery フィールド と html フィールド と css フィールド と jquery-ui フィールド 関連 問題

how to update a css class dynamically onclick a dropdown jquery












0
vote

問題

日本語

マルチセレクトイネーブルでドロップダウンしています。ドロップダウンから値を取得し、値をCSSクラスに渡すことができます。 元: and and アラブ首長国連邦 アフガニスタン アンティグアとバーブーダ

を使ってドロップダウンから国コードを取得しています <事前> <コード> $( this).val()

フラグを表示するフラグを表示するための分離されたdivがあります。 <事前> <コード> <div class="flag"> <li class="flag selected "+<append country code here></li> </div>

先行問題は、addClass(value)onchange event.itを使用しているときです。既存のClass.butに追加されました。既存の国コードをクリアして新しいONE

を追加する必要があります。

私のスクリプトは

<事前> <コード> $('#test').on('change', function() { $('li').addClass($( this).val()) });

事前にありがとうございました。

英語

I have a dropdown with multi select enable.I am able to retrieve a value from the dropdown and am passing the value to css class. ex: Andorra United Arab Emirates Afghanistan Antigua and Barbuda

am retrieving the country code from the drop down using

$( this).val() 

i have a seperate div to show the flags where i have an li to display the flag

      <div class="flag">                 <li class="flag selected "+<append country code here></li>              </div> 

the issue am facing is when i use addClass(value) onchange event.it starts appending to the existing class.But, i need to clear the existing country code and append new one

my script is

 $('#test').on('change', function() {   $('li').addClass($( this).val())     }); 

Thanks in Advance.

</div
              
     
     

回答リスト

2
 
vote
vote
ベストアンサー
 

$('li').removeClass() ですべてのクラスを削除してから、3つのクラスを追加します。 $('li').addClass("flag selected " + $(this).val())

<事前> <コード> $('li') .removeClass() .addClass("flag selected " + $(this).val());

あるいは、前のクラスを変数に保存し、<コード> .removeClass(previousCountryClass) を使用することもできます。

btw - <コード> connect()0 は一般的です。おそらくそれを選択するために一意の connect()1 を追加する必要があります。

 

Remove all the classes with $('li').removeClass() and then add the three classes: $('li').addClass("flag selected " + $(this).val())

$('li')     .removeClass()     .addClass("flag selected " + $(this).val()); 

Alternatively, you can save the previous class in a variable, and use .removeClass(previousCountryClass).

BTW - $("li") is way too-general. You should probably add a unique id to select it.

</div
 
 
0
 
vote

以下の解決策のいずれかを試してください。

ソリューション .removeattr()

を使用して1つ <事前> <コード> connect()2

ソリューション2 .removeclass()

<事前> <コード> connect()3
 

Try any one of below solutions.

Solution one Using .removeAttr()

  $('#test').on('change', function() {       $('li').removeAttr( "class" );       $('li').addClass("flag selected"+$( this).val());   }); 

Solution two Using .removeClass()

  $('#test').on('change', function() {       $('li').removeClass();       $('li').addClass("flag selected"+$( this).val());   }); 
</div
 
 

関連する質問

8  jQuery UIタブの背景色  ( Jquery ui tabs background color ) 
タブ領域の背景を変更しようとしています。好きなタブのリストがあります、そして、私は各タブの色を変更する方法を知っていますが、そのすべての背景。通常は濃い灰色の色で、タブは薄い灰色です。私はそれらの色を明るい青、または薄緑色のどちらかに変えたいと思いました、そし...

3  JQueryUIのASP.NET:サーバーサイドイベントは起動しません  ( Asp net with jqueryui server side event not firing ) 
私はページがjQuery UIダイアログを利用しているASP.NETページを持っています。ユーザーがページ内のボタン(<コード> btnGo )をクリックしているときは、ユーザーがログインしているかどうかを確認します。ログインしていない場合は、ログインするjQ...

0  jQueryにおけるテーブルナビゲーションのパフォーマンスの向上  ( Improving performance of table navigation in jquery ) 
ASP.NET GridViewのキーを使用してテーブルナビゲーションを作成しようとしています。これが私がこれまでのものを持っているものです。それはうまく機能していますが、それは遅いです。それを見て、可能な限りパフォーマンスを向上させる方法を教えてください。...

3  jQuery Ui Draggable 'Stop'イベントは何度も呼びましたか?  ( Jquery ui draggable stop event called too many times ) 
私は私が「停止」イベントを誤解しているか、正しくないように感じますが、要素がドラッグされている間に数回呼び出されているようです。 <事前> <コード> makeAllDragable = function () { $(".test-table").d...

0  jQuery UIの入れ子になったタブ - Ajaxコンテンツを単一のDIVにロードする  ( Jquery ui nested tabs load ajax content into a single div ) 
ALL、 jQuery UIの入れ子タブを使用しています。このような構造を考えてみましょう:2つのメインタブがあります:動物、鳥。動物の下で、「猫」、「犬」の2つのタブがあります。クリックされたときには、「猫」と「犬」の両方をAjaxでロードする必要があり...

239  関数からjQueryダイアログのボタンを無効にするにはどうすればよいですか。  ( How can i disable a button in a jquery dialog from a function ) 
私はユーザーが特定の情報を入力する必要があるjQueryダイアログを持っています。この形式では、「続行」ボタンがあります。この「続行」ボタンを使用してください。すべてのフィールドにコンテンツがあると、それ以外の場合は無効になります。 フィールドステータスが変更...

3  jQuery ui.slider:ハンドルを表示/非表示にするには、イベントを追加する  ( Jquery ui slider add click event to display hide handle ) 
私はJavaScriptとjQueryにはまったく新しいです。私のプログラミングの知識は...存在しません、私はちょうどcssクラスを置き換えるかdivを切り替えるようないくつかの簡単な作業で少し前に始めました。だから私はここに新しいビーの質問をすることによっ...

1  どのようにしてjQuery UI入力ボタンにアイコンを入れることができますか?  ( How can i put icons on a jquery ui input button ) 
jQuery UIボタンのマニュアルに基づいて、次のようにしました。 <事前> <コード> <jquery>$("#test").button({ icons: { primary:'ui-icon-gear' } });</jquery> <input i...

2  ASP.NETボタンのjQuery UIボタンスタイル  ( Jquery ui button style for asp net button ) 
どうすれば<a href="https:/jqueryui.com/button//jqueryui.com/button//jquery uiボタンスタイル</a> asp.netボタンに使用できますか?どうやって私の肌やその他の方法でやることができますか?...

0  IDのないjQuery UIダイアログ  ( Jquery ui dialog without id twice ) 
複数のダイアログを1ページに置きようとしています - 彼らは複数回起きることができる必要があります。 ASP.NETを使用しているので、ダイアログに入るコンテンツのIDは閉じ込められています。ダイアログを複数回実行するための例はすべて、コンテンツIDを使用して...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有