Блог

Я действительно надеюсь, что кто-нибудь сможет помочь мне с этой проблемой Javascript, с которой я боролся последние пару дней.

Я пытаюсь получить 2 divs для отображения или скрытия в зависимости от выпадающего списка. Я просмотрел различные примеры кода здесь, 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», скройте другой div

Вы делаете ошибки последовательности с помощью logic и sintaxe. Когда выбран какой-либо параметр div, правильным будет показать один и скрыть другой.

 $("#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> 

Прежде всего, негатив здесь смешон! Этот парень, очевидно, учится и хвалит это… Добро пожаловать, 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 amp; 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 будет выглядеть примерно так

 <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>