Question

我过去曾问过一个类似的问题，但我把下面的例子放在一起，更好地说明了我正在寻找的结果。

使用经典js的唯一ID（可行）

<style>
#par {width:350px; background:#DDD; padding:5px;}
#tatx {color:#C00;}
</style>

<div id="par">
Select an option, then, select another option<br>
<select id="sl" onChange="sltota();tatotx()">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
    <p>Selected options values are passed to textarea<br>
<textarea id="ta" onChange="tatotx()"></textarea>
<p>Textarea value is passed to div as text
<div id="tatx">div text</div>
</div>

<script>
function sltota() {
slVal = document.getElementById('sl').value;
taVal = document.getElementById('ta').value;
document.getElementById('ta').value = taVal + ('- ') + slVal + ('\n');
}

function tatotx() {
taVal = document.getElementById('ta').value;
document.getElementById('tatx').innerHTML = taVal;
}
</script>

现在我正在尝试使用Jquery $（this）修改此代码，其中多个元素具有相同的类。但我无法使它工作任何帮助表示赞赏。（这不起作用）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
li {margin-bottom:7px; background:#DDD; padding:5px;}
#par {width:350px;}
.tatx {color:#C00;}
</style>

<div id="par">
<ul>

<li>
Select an option, then, select another option.<br>
<select class="sl">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>

</ul>
</div>

<script>
$(document).ready(function(){
$('li > .sl').on('change', function() {
    $(this).sibling('.ta').val($(this).val());
    $(this).sibling('.tatx').val($('.ta').val());

});
}
</script>

Answer 1

它应该是siblings而不是兄弟：

$('li > .sl').on('change', function() {
    $(this).siblings('.ta').val($(this).val());
    $(this).siblings('.tatx').val($('.ta').val());   
});

jQuery中没有兄弟选择器，但siblings。

Answer 2

一些事情：

它是siblings，而不是sibling。 siblings只关注直接的兄弟姐妹，而不是他们的后代。 .tatx很好，因为它是一个直接的兄弟，但.ta是兄弟（p元素）的孩子，所以你必须使用find()遍历找到的兄弟姐妹
您的JS代码最后缺少);以关闭ready声明
Divs无法使用val(),设置内容，您需要设置html()

因此...

<script>
$(document).ready(function(){
$('li > .sl').on('change', function() {
    $(this).siblings().find('.ta').val($(this).val());
    $(this).siblings('.tatx').html($(this).val());
    });
});
</script>

如何使用多个相同的类与唯一ID分配$（this）

2 个答案: