我有一个webform，我试图根据下拉选项来操纵一些只读文本输入的值。
HTML（缩写）基本上如下所示：
<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>
在页面上，这些基本上看起来像表行，其中您有一列下拉列表，用户将从中选择重量和分数旁边的列。因此，每组selector，input和input都是一行。
我想要做的是根据同一行中选择器和权重输入的值更改.score字段集中输入的值 - 即父div的索引等于它们对应的选择器的父div的索引。
我无法搞清楚的部分是如何在jQuery中将变量设置为“父div的索引等于另一个选择器/输入的父div的索引的输入。”
这是我到目前为止所得到的：
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());
});
请帮忙吗？
答案 0 :(得分：0)
这是工作代码！
jQuery('fieldset.webform-component--rubric--part1.form-wrapper select[id$="-points"]').change(function() {
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>
答案 1 :(得分：0)
此代码适用于您的笔：
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);
});