0

このコードを圧縮して DRY にする方法がわかりません。さまざまな要素で、またはコードを繰り返すときに問題なく動作しますが、きれいに保ちたいです。これは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') + '">');
   });

しかし、そのコードでは「顔」は 1 つしか持てず、実際には 2 つ必要です。では、jquery コードを変更して兄弟を置き換え、<img>他の兄弟に影響を与えないようにするにはどうすればよいでしょうか。最初のコードは画像を見つけようとするため、機能しません/ajax/faces/undefined。

4

3 に答える 3

0

約 1 時間掘り下げた後、別の観点から、解決することができました。これは、このSOの質問のおかげで、私にとってうまくいった解決策です:

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

そして、これが私が望んでいたものの動作バージョンです（ランダムなインターネットフェイスを使用）。

注：私は答えていますが、これを書き始めてからいくつかのより良い答えがあったので、そのうちの1つを受け入れます.

于 2013-05-02T01:13:33.937 に答える