jquery 在容器中使用 parent() 和 closest()

Question

我很难弄清楚如何让 jQuery 函数在不同的容器中单独工作，对我来说，容器称为 'dyndrop'。

我有两个下拉菜单，第二个下拉菜单取决于第一个下拉菜单的值。到目前为止，它适用于页面上的第一个下拉列表对，但所有其他下拉列表都不会。

我知道它来自 selecting .aufgabe_0，它将 select DOM 中的每个 class，即 10 个。那么如何才能我让这个函数只在 'dyndrop' 容器内工作。

谢谢！

HTML

 <div class="dyndrop columns nopadding large-4">
    <div class="columns large-6">
        <label>
          <select class="aufgabe_0"> <!-- aufgabe_1 -->
            <!-- Frage ist ob CGI/CAS dieses Feld dynamisch ändert -->
            <option disabled selected value="">Aufgabe</option>
            <option value="int">Interieur</option>
            <option value="ext">Exterieur</option>
          </select>
        </label>
    </div>
    <div class="columns large-6">
        <label>
          <select class="bauteil_0" disabled> <!-- bauteil_1 -->
            <!-- reagiert auf vorheriege eingabe -->
            <option disabled selected value=""></option>
            {% for int in menu_int %}
            <option value="int">{{ int }}</option>
            {% endfor %}
            {% for ext in menu_ext %}
            <option value="ext">{{ ext }}</option>
            {% endfor %}
          </select>
        </label>
    </div>
</div>

JS

$(function() {
  $('.aufgabe_0').change(function(){
    if ($('.aufgabe_0 option:selected').val() == 'int') {
      console.log('interieur ausgewählt');
      $('.bauteil_0').prop( "disabled", false );
      $('.bauteil_0 option').hide().filter('.bauteil_0 option[value="int"]').show();
    }
    else if ($('.aufgabe_0 option:selected').val() == 'ext') {
      console.log('exterieur ausgewählt')
      $('.bauteil_0').prop( "disabled", false );
      $('.bauteil_0 option').hide().filter('.bauteil_0 option[value="ext"]').show();
    }
    else {
      $('.bauteil_0').prop( "disabled", true );
    }
  });
});

Answer 1

您可以使用 .closest() 遍历到共同的父元素，然后使用 .find() 来定位想要的元素。

$('.aufgabe_0').change(function () {
    //Use these object
    var aufgabe = $(this);
    var bauteil = aufgabe.closest('.dyndrop').find('.bauteil_0');

    ...
});

$('.aufgabe_0').change(function() {
  //Use these object
  var aufgabe = $(this);
  var bauteil = aufgabe.closest('.dyndrop').find('.bauteil_0');

  bauteil.prop('disabled', !bauteil.prop('disabled'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dyndrop columns nopadding large-4">
  <div class="columns large-6">
    <label>
          <select class="aufgabe_0">  
          <option value="int1">Select</option>
            <option value="int">Interieur</option>
          </select>
        </label>
  </div>
  <div class="columns large-6">
    <label>
          <select class="bauteil_0" disabled>
            <option value="int">1</option>
          </select>
        </label>
  </div>
</div>
<div class="dyndrop columns nopadding large-4">
  <div class="columns large-6">
    <label>
          <select class="aufgabe_0">  
          <option value="int1">Select</option>
            <option value="int">Interieur</option>
          </select>
        </label>
  </div>
  <div class="columns large-6">
    <label>
          <select class="bauteil_0" disabled>
            <option value="int">1</option>
          </select>
        </label>
  </div>
</div>

Answer 2

或者你可以使用这种方式，如果你有更多的 .bauteil_0 在 .dyndrop ....! select 只有您在问题中的下拉列表。

$('.aufgabe_0').change(function(event) {
    var dependent = $(this).parents('.columns.large-6').next().find('.bauteil_0');
    //now work with dependent
});

jquery 在容器中使用 parent() 和 closest()

jquery working in containers with parent() and closest()

jquery

parent

closest

drop-down-menu