Question

在我的Rails应用程序中，我有一个页面需要根据选择选项显示或隐藏div。这需要在我的应用程序中发生在两个单独的div上，因此我尝试使用两个jquery事件侦听器来实现此目的。我不太了解javacript，所以我很难弄清楚我在做什么错。问题在于，一次只能有一个事件侦听器，而不能同时工作。这是我的js中的代码

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select[name="lesson[lesson_type]"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
    if(event.target.value === "physical" ) {
      hiddenDiv.style.display='inline-block';
    }
    else {
        hiddenDiv.style.display='none';
    }
}


document.addEventListener('DOMContentLoaded',function() {
  document.querySelector('select[name="lesson[course_id]"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
   var course_status = $('#lesson_course_id option:selected').attr('course_type');

    if(course_status == "physical" ) {
      $(".vimeo_link_display").hide();
    }
    else {
        $(".vimeo_link_display").show();
    }
}

这是页面中的两个单独的下拉菜单

   <%= f.input :lesson_type, label: t(".lesson_type") %>
   <%= f.association :course, collection: current_academy.courses.collect { |u| [u.title, u.id, { course_type: u.course_type }] }, prompt: t("select") %>

这是为js中的第一个选择生成的html

<select class="form-control enum optional form-control" 
  name="lesson[lesson_type]" id="lesson_lesson_type"><option value="">
  </option> <option selected="selected" value="video">video</option> 
  <option value="podcast">podcast</option> <option 
  value="physical">Physical</option>
</select>

另一个具有生成的html

<select class="form-control select required" name="lesson[course_id]" 
  id="lesson_course_id"><option value="">Vælg</option> <option 
  course_type="online" value="27">Lov om ansættelsesklausuler</option> 
  <option course_type="online" value="54">Skat: 
   Omstrukturering</option> 
  <option course_type="online" value="154">1min couse</option> <option 
  course_type="podcast" value="157">Ransack 101</option> <option 
  course_type="physical" value="158">Physical Course Test </option>
 </select>

该页面上只有一项活动。我的目标是当我从每个下拉列表中选择正确的值时使两者都起作用。

如果您需要更多代码示例，请告诉我。

Answer 1

您只需要一个根目录列表器，然后合并为一个。您可以将changeEventHandler1和changeEventHandler2重命名为您想要的名称：）

document.addEventListener('DOMContentLoaded',function() {

  
 document.querySelector('select[name="lesson[lesson_type]"]').onchange=changeEventHandler1;
},false);
function changeEventHandler1(event) {
    if(event.target.value === "physical" ) {
      hiddenDiv.style.display='inline-block';
    }
    else {
        hiddenDiv.style.display='none';
    }
}

  document.querySelector('select[name="lesson[course_id]"]').onchange=changeEventHandler2;
},false);
function changeEventHandler2(event) {
   var course_status = $('#lesson_course_id option:selected').attr('course_type');

    if(course_status == "physical" ) {
      $(".vimeo_link_display").hide();
    }
    else {
        $(".vimeo_link_display").show();
    }
}

Answer 2

$(document).ready(function(){
  $('.you-select-tag').change(function(){
    $('.div1-to-hide').hide(); # or .show();
    $('.div2-to-hide').hide(); # or .show();
  }
}

如何在一页上呈现两个事件侦听器

2 个答案: