divを変更するためにJavascriptを実行できません

Question

私は過去の数日間戦ってきたこのJavascriptの問題を誰かが助けてくれることを願っています。

私はドロップダウンの選択に応じて2つのdivを表示または非表示にしようとしています。ここではさまざまなコード例を見てきましたが、jFiddleやその他のリソースがありますが、すべてのスクリプトは動作しません。理由はわかりません。

生のHTML：

<select id="dropdown" onChange=""> 
<option value="blank"></option> 
<option value="sd" id="SD">Header 1</option> 
<option value="oc" id="OC">Header 2</option> 
</select> 

<div class="data"> 

<div id="div1"> 
<h1>Header 1</h1> 
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
</div> 

<div id="div2"> 
<h1>Header 2</h1> 
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
</div> 
</div> 

生はjavascript：誰かが正しい方向に私を指すことができれば

("dropdown").change(function() { 
if($("dropdown".option)='blank'{ 
    $("data").style.visibility='hidden'();} 

if($("dropdown".option)='SD'{ 
    $("div1").style.visibility='visible'();} 
    else{ 
     $("div2").style.visibility='hidden'();} 

if($("dropdown".option)='OC'{ 
    $("div2").style.visibility='visible'();} 
    else{ 
     $("div1").style.visibility='hidden'();} 


}); 

、それは素晴らしいだろう。基本的に、私がやろうとしていることである：

ドロップダウン選択=「このdiv要素」の場合は、ロジックとsintaxeと連番のミスをやっている他のdiv

Answer 1

を非表示にします。 divのいくつかのオプションが選択されている場合、正しいものは1つを表示し、別のオプションを隠すことです。すべての否定性の

$("#dropdown").change(function() { 
 
    if ($("#dropdown").val() == 'sd') { 
 
     $("#div1").show(); 
 
     $("#div2").hide(); 
 
    } else if ($("#dropdown").val() == 'oc') { 
 
     $("#div1").hide(); 
 
     $("#div2").show(); 
 
    } else { 
 
     $(".data").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="dropdown" onChange=""> 
 
<option value="blank"></option> 
 
<option value="sd" id="SD">Header 1</option> 
 
<option value="oc" id="OC">Header 2</option> 
 
</select> 
 

 
<div class="data"> 
 

 
<div id="div1"> 
 
<h1>Header 1</h1> 
 
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
 
</div> 
 

 
<div id="div2"> 
 
<h1>Header 2</h1> 
 
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
 
</div> 
 
</div>

Answer 2

まずここにばかげています！ この男は明らかにそのことを学んでいると賞賛しています。歓迎kjones :) jQueryを続けることをお勧めしますが、jQueryは実際にはあなたが悪いプログラマーになるすべての答えではありません。実際のjavascriptを学ぶことはとても大変ですので、そうすることもお勧めします。 :)

しかし、私はここでの解決方法は非常に単純ですが、基本的にはあなたの考え方を忘れてしまいます。ここではjQueryが原因です。

jQueryを使用していた場合は、この機能を再利用できるように思えるので、プラグインを作成します。

$.fn.selectorThing = function (rootDivClass) { 

    // hide all the divs which have the rootClass 
    hideAllTheDivs = function() { 
    $('[class^="'+ rootDivClass +'"]').hide(); 
    } 

    // hide all the divs which have the rootClass & show the right one 
    showDiv = function (val) { 
    hideAllTheDivs(); 
    $('.'+ rootDivClass + '-' + val).show(); 
    } 

    // run showDiv on change and pass the selected value 
    this.change(function() { 
    showDiv(
     $(this).find(":selected").attr('value') 
    ); 
    }); 

    // initally we want to hide all of the classes data-* 
    hideAllTheDivs(); 

    // return this so we can chain another jQuery function 
    return this; 
} 

$('#dropdown').selectorThing('data'); 

私のHTMLは... `場合（$（）.OPTIONを "ドロップダウン"= 'SD' {`上記のかなりの数の構文エラーがあります。この

<select id="dropdown"> 
<option value="blank"></option> 
<option value="sd" id="SD">Header 1</option> 
<option value="oc" id="OC">Header 2</option> 
</select> 

<div class='data-sd'> 
    content 
</div> 
<div class='data-oc'> 
    some other content 
</div>