如何为 $(this) 分配多个相同的类与唯一的 id

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

一些事情：

1. 是siblings，而不是sibling。而siblings 只关注直系兄弟姐妹，而不是他们的后代。 .tatx 很好，因为它是直接兄弟，但 .ta 是兄弟（p 元素）的子，因此您必须使用 find() 遍历找到的兄弟

2. 您的 JS 代码末尾缺少 ); 以关闭 ready 语句

3. Div 不能使用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>

Answer 2

应该是siblings 不是兄弟：

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

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