0

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

我想实现这一点，当我更改选择时，该 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>而不影响其他的呢？第一个代码不起作用，因为它试图找到图像/ajax/faces/undefined。

4

3 回答 3

1

问题是兄弟姐妹不返回它被调用的元素。在这种情况下，$(this)是选择器，所以$(this).siblings('select')什么都不返回。还有一些方法可以清理你的代码。 <select>元素具有分配给它们的值，因此您可以简单地使用$('select').val(). on()使用该功能也可能是相关的。

这是一些 jsFiddle 解决了一个非常相似的问题。

于 2013-05-02T01:03:30.590 回答
1

尝试这个：

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

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

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

小提琴

于 2013-05-02T01:04:14.060 回答
0

经过大约 1 小时的挖掘，现在从不同的角度来看，我可以解决它。由于这个问题，这是对我有用的解决方案：

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

这是我想要的工作版本（带有随机的互联网面孔）。

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

于 2013-05-02T01:13:33.937 回答