Variable als Eingabe setzen, deren Elternindex mit einer anderen Variablen übereinstimmt

Question

Ich habe ein Webformular, in dem ich versuche, den Wert einiger schreibgeschützter Texteingaben basierend auf Dropdown-Auswahl zu manipulieren.

HTML (abgekürzt) sieht grundsätzlich wie folgt:

<fieldset class="container"> 
    <fieldset class="foo-points-fs"> 
     <div> 
      <selector id="foo-bar1-points"> 
       <option>1</option> 
       <option>2</option> 
      </selector> 
     </div> 
     <div> 
      <selector id="foo-bar2-points"> 
       <option>1</option> 
       <option>2</option> 
      </selector> 
     </div> 
    </fieldset> 
    <fieldset class="foo-weight-fs"> 
     <div> 
      <input readonly="readonly" value="1" id="foo-bar1-weight"/> 
     </div> 
     <div> 
      <input readonly="readonly" value="2" id="foo-bar2-weight"/> 
     </div> 
    </fieldset> 
    <fieldset class="foo-score-fs"> 
     <div> 
      <input readonly="readonly" value="0" id="foo-bar1-score"/> 
     </div> 
     <div> 
      <input readonly="readonly" value="0" id="foo-bar2-score"/> 
     </div> 
    </fieldset> 
</fieldset> 

auf der Seite, diese wie Tabellenzeilen sieht im Grunde, wo Sie eine Spalte von Dropdown-Listen haben die Benutzer mit Spalten für das Gewicht wählen werden und sammeln neben es. So ist jeder Satz von selector, input und input eine Zeile.

Was ich tun möchte, ist den Wert der Eingaben innerhalb der .score fieldset entsprechend dem Wert des Selektors und Gewicht Eingabe in der gleichen Zeile ändern - dh diejenigen, deren Eltern divs 'Indizes gleich ihren entsprechenden Selektoren sind Eltern-Div-Index. Der Teil, den ich nicht herausfinden kann, ist, wie man in jQuery sagt, dass eine Variable auf "die Eingabe gesetzt werden soll, deren übergeordneter div-Index dem Index eines anderen Selektors/Inputs entspricht".

Hier ist, was ich bisher habe:

jQuery('fieldset.container select[id$="-points"]').change(function() { 

    var sel = jQuery(this), 
     fs = sel.parents('fieldset[id$="-points-fs"]'), 
     dropPar = sel.parent('div'), 
     dropNdx = dropPar.index(), 
     weightInput = fs.find('input[id$="-weight]'), 
     scoreInput = fs.find('input[id$="-score"]'), 
     weight = weightInput.parent('div').index(dropNdx), // problem is here, I assume 
     score = scoreInput.parent('div').index(dropNdx); // problem is here, I assume 

    score.val(weight.val() * sel.val()); 

}); 

Hilfe bitte?

Answer 1

Hier ist der Arbeitscode!

jQuery('fieldset.webform-component--rubric--part1.form-wrapper select[id$="-points"]').change(function() { 
 
\t 
 
    \t var value = $(this).val(); 
 
    var index = $(this).parent().index() + 1; 
 
    var weight = $(this).parent().parent().parent().next().find('#pid'+index+'-weight').val(); 
 
    
 
    $(this).parent().parent().parent().next().next().find('#pid'+index+'-score').val(value*weight); 
 
    
 
});

.description, select { 
 
    display: inline; 
 
} 
 
.description { 
 
    margin-right: 10px; 
 
} 
 
input[type="text"] { 
 
    width: 30px; 
 
    text-align: center; 
 
} 
 
fieldset fieldset { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<fieldset class="webform-component--rubric--part1 form-wrapper"> 
 
    <div class="fieldset-wrapper"> 
 
     <div></div> <!-- unrelated --> 
 
     <fieldset class="webform-component--rubric--part1--row-pid"> 
 
      <div class="fieldset-wrapper"> 
 
       <div></div> 
 
       <div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
       </div> 
 
       <fieldset class="webform-component--rubric--part1--row-pid--pid-points-fs"> 
 
        <div class="fieldset-wrapper"> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid1-points"> 
 
         <div class="description">1.</div> 
 
         <select id="pid1-points" name="pid1_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid2-points"> 
 
         <div class="description">2.</div> 
 
         <select id="pid2-points" name="pid2_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid3-points"> 
 
         <div class="description">3.</div> 
 
         <select id="pid3-points" name="pid3_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid4-points"> 
 
         <div class="description">4.</div> 
 
         <select id="pid4-points" name="pid4_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
        </div> 
 
       </fieldset> 
 
       <fieldset class="webform-component--rubric--part1--row-pid--pid-weight-fs"> 
 
        <div class="fieldset-wrapper"> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid1-weight"> 
 
          <label>1. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid1-weight" name="pid1_weight" value="1" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid2-weight"> 
 
          <label>2. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid2-weight" name="pid2_weight" value="2" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid3-weight"> 
 
          <label>3. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid3-weight" name="pid3_weight" value="2" /> 
 
         </div> 
 
         <div readonly="readonly" class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid4-weight"> 
 
          <label>4. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid4-weight" name="pid4_weight" value="3" /> 
 
         </div> 
 
        </div> 
 
       </fieldset> 
 
       <fieldset class="webform-component--rubric--part1--row-pid--pid-score-fs"> 
 
        <div class="fieldset-wrapper"> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid1-score"> 
 
          <label>1. Score</label> 
 
          <input readonly="readonly" type="text" id="pid1-score" name="pid1_weight" value="0" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid2-score"> 
 
          <label>2. Score</label> 
 
          <input readonly="readonly" type="text" id="pid2-score" name="pid2_weight" value="0" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid3-score"> 
 
          <label>3. Score</label> 
 
          <input readonly="readonly" type="text" id="pid3-score" name="pid3_weight" value="0" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid4-score"> 
 
          <label>4. Score</label> 
 
          <input readonly="readonly" type="text" id="pid4-score" name="pid4_weight" value="0" /> 
 
         </div> 
 
        </div> 
 
       </fieldset> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
</fieldset>

Answer 2

Dieser Code arbeitete auf dem Stift:

jQuery('fieldset.webform-component--rubric--part1.form-wrapper select[id$="-points"]').change(function() { 
    // get select value 
    var value = jQuery(this).val(); 
    // get select id 
    var id = jQuery(this).attr('id'); 
    // use replace to get clear digit from id 
    var num = id.replace (/[^\d.]/g, ''); 
    // build selector for wight based on num and get its value * select value 
    var score = value * jQuery('#pid'+num+'-weight').val(); 
    // build selector for score based on num and set the value 
    jQuery('#pid'+num+'-score').val(score); 
});