Question

我无法弄清楚如何压缩此代码以使其干燥。它适用于不同的元素或重复代码，但我想保持干净。这是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：

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

我想实现这一点，当我更改select时，该div的img将被替换为一个新的（从选择的选项的值动态创建src）。如果我这样做，我可以做到这一点（删除$(this).siblings）：

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

但是使用那个代码我只能有一个'面子'，而我实际上想要两个。那么，如何修改我的jquery代码来替换它的兄弟<img>而不影响其他代码？第一个代码不起作用，因为它试图找到图像{{1} }。

Answer 1

问题是兄弟姐妹不会返回它所调用的元素。在这种情况下，$(this)是选择器，因此$(this).siblings('select')不返回任何内容。还有一些方法可以清理代码。 <select>元素已分配给它们，因此您只需使用$('select').val()即可。使用on()函数也可能是恰当的。

Here是一些jsFiddle解决一个非常类似的问题。

Answer 2

试试这个：

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

您的代码的主要问题是选项不是兄弟，他们是孩子，所以您应该使用find()。但是所选选项的值也是select的值，因此可以完全简化。

而不是替换整个<img>元素，我只是替换现有元素的src属性。

FIDDLE

Answer 3

经过大约1小时的挖掘，现在从不同的角度来看，我可以解决它。这个解决方案对我有用，感谢this SO question：

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

And here is a working version of what I wanted（随机互联网面孔）。

注意：虽然我在回答，但自从我开始写这篇文章以来，已经有了几个更好的答案，我会接受其中一个。

选择一个选项后修改img兄弟

3 个答案: