選擇一個選項後修改img兄弟

我無法弄清楚如何壓縮此代碼以使其乾燥。它適用於不同的元素或重複代碼，但我想保持清潔。這是HTML：選擇一個選項後修改img兄弟

<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') + '">'); 
    });

我要做到這一點，當我改變選擇，該分區的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。

來源

2013-05-02 Francisco Presencia

我傾向於在追蹤'$（this）'在這種情況下出現問題。嘗試在'replaceWith'之前存儲'$（this）'或'$（this）'的所需兄弟。 – astex 2013-05-02 00:47:58

我也是，我只是在學習jquery，並且沒有來自PHP的'echo'或'var_dump'。但是，即使存儲它，我也無法讓它變得更好。我不認爲傾銷所有我失敗的嘗試將會改善我的問題... – 2013-05-02 00:54:11

我可以解決它，最終改變我的觀點！我會寫它作爲答案。 – 2013-05-02 01:02:55

試試這個：

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

與您的代碼的主要問題是，選項並不兄弟姐妹，他們是孩子，所以你應該使用find()。但所選選項的值也是選擇的值，因此可以完全簡化。

而不是取代整個<img>元素，我只是替換現有元素的src屬性。

FIDDLE

來源

2013-05-02 01:04:14 Barmar

它看起來不錯，但它說'SyntaxError：失蹤;在陳述之前'並且指向最長的線。 – 2013-05-02 01:12:09

@Barmar，看起來像'val'後有一個額外的'）'。 – DACrosby 2013-05-02 01:17:49

謝謝，它是固定的。 – Barmar 2013-05-02 01:21:20

問題是兄弟姐妹沒有返回它被調用的元素。在這種情況下，$(this)是選擇器，因此$(this).siblings('select')什麼都不返回。還有幾種方法可以清理代碼。 <select>元素有一個值分配給他們，所以你可以簡單地使用$('select').val()。它也可能適用於使用on()函數。

Here是一些jsFiddle解決一個非常類似的問題。

來源

2013-05-02 01:03:30 astex

'$（this）'不會改變它的值，除非你把一個函數傳遞給'replaceWith（）'。 – Barmar 2013-05-02 01:04:55

你說得對。我想我已經解決了我的答案。 – astex 2013-05-02 01:09:46

我會看看如何適應我的情況下的jsFiddle，謝謝！ – 2013-05-02 01:14:40

從不同的角度出發約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（隨機網上面）。

注意：雖然我在回答，但是自從我開始寫這篇文章以來，有幾個更好的答案，我會接受其中的一個。

來源

2013-05-02 01:13:33

選擇一個選項後修改img兄弟

回答

相關問題