Jquery 选择选项后修改img同级

我不知道如何压缩这段代码使其干燥。它适用于不同的元素或重复代码，但我希望保持干净。这是html：

<div class = "face left">
  <img src = "/images/faces/empty.jpg"><br>
  <select>
    <option value="empty">Select one</option>
    <option value="ab18e97e6c64f8db588e95772daf51b4">Takeshi</option>
    <option value="d27b579c196202648ba7c4b1904e8e20">Osuka</option>
  </select>
</div>
<div class = "face right">
  <img src = "/images/faces/empty.jpg"><br>
  <select>
    <option value="empty">Select one</option>
    <option value="ab18e97e6c64f8db588e95772daf51b4">Takeshi</option>
    <option value="d27b579c196202648ba7c4b1904e8e20">Osuka</option>
  </select>
</div>

---

但是有了这些代码，我只能有一张“脸”，实际上我想要两张。因此，我如何修改jquery代码以替换它的同级

，而不影响其他同级？第一个代码不起作用，因为它试图查找图像

/ajax/faces/undefined

问题是同级不返回调用它的元素。在本例中，

$（this）

是选择器，因此

$（this）.sillides（'select'）

不返回任何内容。还有一些方法可以清理代码<代码>元素有一个指定给它们的值，因此您可以简单地使用

$（'select'）.val（）

。也可以使用

on（）

函数

是某个JSFIDLE解决了一个非常类似的问题。

尝试以下方法：

$('.face > select').change(function()
   {
   $(this).
     siblings('img').attr('src', '/ajax/faces/' + $(this).val());
   });

代码的主要问题是，选项不是兄弟项，而是子项，因此应该使用

find（）

。但所选选项的值也是select的值，因此可以完全简化

而不是替换现有元素的整个

属性

经过大约1小时的挖掘，现在从另一个角度来看，我可以解决它了。这是对我有效的解决方案，感谢：

$（'.face'）。子项（'select'）。更改（函数（）
{
美元（本）。
兄弟姐妹（“img”）。
替换为（“”）；
});

（随机的互联网面孔）

注意：虽然我在回答，但自从我开始写这篇文章以来，有两个更好的答案，我会接受其中一个。
我在跟踪这种情况下的
$（this）
时往往会遇到问题。在用

替换之前，尝试存储

$（this）

或

$（this）

所需的兄弟姐妹。我也是，到目前为止，我只是在学习jquery，没有PHP的

echo

或

var\u dump

时遇到了麻烦。然而，即使把它储存起来，我也不能让它变得更好。我不认为放弃所有失败的尝试会大大改善我的问题…我最终可以改变我的观点来解决它！我将把它作为一个答案来写。

$（这个）

不会改变它的值，除非你将一个函数传递给

replaceWith（）

。它看起来不错，但是它说

SyntaxError:missing；在语句之前，指向最长的一行。@Barmar，看起来您在
val（）
之后有一个额外的
）
。我不知道为什么，但它只是…问题是因为我用
prev
替换了
同级
。上一个元素是

，我没有注意到这一点。我只是得到了与上一个代码相同的代码（与上次编辑的代码相同），然后我将接受它。非常感谢你！(:
$('.face').children('select').change(function()
   {
   $(this).
     siblings('img').
     replaceWith('<img src = "/ajax/faces/' + $('select option:selected').attr('value') + '">');
   });

$('.face > select').change(function()
   {
   $(this).
     siblings('img').attr('src', '/ajax/faces/' + $(this).val());
   });

$('.face').children('select').change(function()
 {
 $(this).
   siblings('img').
   replaceWith('<img src = "/ajax/faces/' + $("option:selected", this).attr('value') + '">');
  });