如何只定位與on（更改）事件處理程序關聯的類？

Question

我創建了一個三問題調查，其中根據所選選項，用戶會收到更多詳細信息或錯誤消息。我需要該消息僅切換髮生事件的當前表單。我如何只定位與當前事件關聯的類？

(function() { 
$('.styled-select').on('change', function() { 
    var id = $('option:selected').parent().attr('id'); 
    console.log(id); 

    var $wrongAnswer = $(this).parent().filter('.wrong-answer'); 
    var $story  = $(this).parent().filter('.story'); 


    if ($.inArray($(this).val(), ['artisan', 'hipster', 'meditation', 'cardigan'])) { 
     $wrongAnswer.removeClass('expand'); 
     $story.addClass('expand'); 

    } else { 
     $wrongAnswer.addClass('expand'); 
     $story.removeClass('expand'); 
    } 

}); 
})(); 

的HTML

<section id="q-three" class="survey"> 
<form action=""> 
    <select name="" id="select-three" class="styled-select" > 
     <option default>Select one</option> 
     <option value="artisan">artisan</option> 
     <option value="humblebrag">humblebrag</option> 
     <option value="brooklyn">brooklyn</option> 
     <option value="kickstarter">kickstarter</option> 
    </select> 
    <h2>Put a bird on it kogi master cleanse try-hard salvia.</h2> 

    <div class="story"> 
     <h3>Pickled letterpress 3 wolf moon crucifix. Migas artisan thundercats, four loko keytar chicharrones shabby chic drinking vinegar knausgaard portland street art occupy small batch. </h3> 
    </div> 
    <div class="wrong-answer"> 
      <h3>Try again!</h3> 
    </div> 
</form> 

Live demo。

Answer 1

將每個問題用div包裝，因此$wrongAnswer和$story將僅在div與當前問題中搜索，而不是在整個表單中。

<section id="q-three" class="survey"> 
<form action=""> 
    <div> 
    <select name="" id="select-three" class="styled-select" > 
     <option default>Select one</option> 
     <option value="artisan">artisan</option> 
     <option value="humblebrag">humblebrag</option> 
     <option value="brooklyn">brooklyn</option> 
     <option value="kickstarter">kickstarter</option> 
    </select> 
    <h2>Put a bird on it kogi master cleanse try-hard salvia.</h2> 

    <div class="story"> 
     <h3>Pickled letterpress 3 wolf moon crucifix. Migas artisan thundercats, four loko keytar chicharrones shabby chic drinking vinegar knausgaard portland street art occupy small batch. </h3> 
    </div> 
    <div class="wrong-answer"> 
      <h3>Try again!</h3> 
    </div> 
    </div> 
</form> 

此外，在腳本中，使用.find()代替.filter()：

var $wrongAnswer = $(this).parent().find('.wrong-answer'); 
var $story  = $(this).parent().find('.story');