2017-06-11 4 views
0

に真のプット・オプション: は、jQueryのスパン値とオプションを比較した場合、私はこのような&オプションを選択する必要があり無効

<span class="get">8</span> 
<span class="get">8.5</span> 

がしたかった

<select id="vari" name="variation" data-variation="US Shoe Size (Men's)"> 
<option id="var8">8</option> 
<option id="var8.5">8.5</option> 
<option id="var9">9</option> 
<option id="var9.5">9.5</option> 
<option id="var10">10</option> 
<option id="var10.5">10.5</option> 
<option id="var11">11</option> 
<option id="var11.5">11.5</option> 
<option id="var12">12</option> 
<option id="var13">13</option> 
<option id="var14">14</option> 
</select> 

と、このような例(隠されたスパン)のための

すべてのオプションを見つけ、スパン値と比較する。 いくつかのオプションがクラスget(例えば)のスパンのような同じ値を持つ場合、この値は変更できます(私はスパンを作成しました) これはオプションを無効にします。 しかし、それはすべてを無効にする問題。

$('#vari').find('option').each(function() { 
    var x = $(this).val(); 
    var y = $('.get').text(); 
    if(x = y){ 
     this.disabled=true; 
    } 
}); 

ここで何が間違っていますか?

ソリューション:::

$('#vari').find('option').each(function() { 
    x = $(this).val(); 
    disable = true; 
    $('.get').each(function() { 
     if(x === $(this).text()){ 
      disable = false; 
     } 
    }); 
    if(disable){ 
     $(this).prop('disabled', true); 
    } 
}); 
+0

私はすべての 'option'反復におけるすべての' .get'の要素をスキャンするために良いアイデアではないと思います。私の投稿されたソリューションは2倍から3倍高速です) –

答えて

0

あなたは瞬間xにおけるダブル==を必要としますが、if文でx = yを設定しているとして、yは常に.getがクラスあなたのjQueryのであるとして(注意してください同じに等しくなります$('.get').text()は心の中でクラス.getともっとそして1つのスパンがある場合ように裸のテキストの配列を回すことができる。)

$('#vari').find('option').each(function() { 
    var x = $(this).val(); 
    var y = $('.get').text(); 
    if(x == y){ 
     this.disabled=true; 
    } 
}); 
0

カップル小さな問題がここにあります。まず、そのように動作するにはネストされたループが必要です。次に、ifでの比較では、実際に比較する代わりにyにxを代入しています。 Javascriptでは、複数の等号 '=='を使用するか、より具体的な '==='を使用して2つのものを比較する必要があります。

var x, 
    disable; 
$('#vari').find('option').each(function() { 
    x = $(this).val(); 
    disable = false; 
    $('.get').each(function() { 
     if(x === $(this).text()){ 
      disable = true; 
     } 
    }); 
    if(disable){ 
     $(this).prop('disabled', true); 
    } 
}); 

私はこれをテストしていませんが、あなたのためにはうまくいくはずです。あなたのループでは、あなたが持っていた問題の1つはあなたの$( '。get')です。 $( '。get')は要素の配列を返し、それを参照していたのは1つしかないからです。

+0

$( '#vari')find( 'option')。 $( '得る。')それぞれ(関数(){ 場合(X === $(この)の.text()){ 無効= FALSE;} }); (無効)場合{ $ (this).prop( 'disabled'、true); } }); –

+0

おかげで、それぞれの.getと==を忘れてしまった –

0

あなたのコードは、多くの問題があります。

$('#vari').find('option').each(function() { // .each is a loop function 
    var x = $(this).val(); 
    var y = $('.get').text(); // so why is this done in every iteration? 
    if(x = y){ // = must be == 
     this.disabled=true; // this is not the right way. Use jquery.prop() 
    } 
}); 

Furthemoreはあなたが.getクラスで複数の要素を持っています。 したがって、var y = $('.get').text();はすべての値を文字列に追加するだけです。あなたの例ではyの出力:88.5

これらの値は、最初に別々の配列に入力してください。

どのように比較作業が他の人によって既に言及されましたか。

disabledプロパティを操作する方法を正しい方法は、jQueryのドキュメントに記載されている: http://api.jquery.com/prop/#prop2

そして、あなたのコードをデバッグするためにconsole.log(myVarName);を使用してください。そのアウトプットの多くはすでにSOで議論されています。だから、あなたがより速く解決策を見つけるでしょう:)

仕組み:

var y = []; 
$('.get').each(function() { 
    y.push($(this).text()); 
}); 

$('#vari').find('option').each(function() { 
    var x = $(this).val(); 
    if (y.includes(x)) { 
    $(this).prop('disabled', true); 
    } 
}); 
関連する問題