2016-06-12 18 views
-2

嗨即時嘗試從輸入框設置圖像,如果我點擊另一個圖像框改變他的價值,然後第一個圖像改變他的src但我不知道爲什麼不工作。是我的腳本對圖像點擊設置輸入值jquery

所有的

$(document).ready(function() { 
 
    $("#skin").change(function() { 
 
     var inputVal = $(this).val(); 
 
     $("#container").attr("src", inputVal); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#container2").click(function() { 
 
     var source = document.getElementById("container2").src; 
 
     $("#skin").val(source) 
 
    }); 
 
});
<input type="text" id="skin"> 
 
<img id="container" width="200px" height="200px" border-radius="50%"> 
 
<img id="container2" src="http://i.imgur.com/xt0IkTL.png"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

+1

以何種方式是這樣的 「*不*工作」?你不需要知道*爲什麼*,但是你必須告訴我們它不應該做什麼,或者它不應該做什麼。順便說一下''是不必要的(而且無效的HTML),''是一個無法包含任何其他內容的void元素。 –

+0

你能解釋什麼是不工作?一個jsfiddle會有所幫助! – hkasera

回答

1

首先,你正在使用jQuery。

所以你不必使用原生的JavaScript DOM選擇器。

第二;您已經定義了文檔準備功能。你不需要再次調用它。

將您的代碼包裝在第一個文檔就緒函數之間。

我強烈建議你改變你的改變方法,像其他東西一樣按下按鈕或觸發器。

畢竟這些建議;

在這裏,你如何能做到這一點:

<input id="source-changer" type="text" placeholder="Image url huh?" /> 
<img id="container" width="200px" height="200px" border-radius="50%"><img id="container2" src="https://i.ytimg.com/vi/PjDtgj7qR94/maxresdefault.jpg" width="100"> 

<!-- sample address here: https://pp.vk.me/c622424/v622424967/39c6c/6poIwEXow7U.jpg --> 

<script> 
$(document).ready(function() { 
    var firstImage = $('#container'); 
    var secondImage = $('#container2'); 

    $('input#source-changer').blur(function(){ 
     var value = $(this).val(); 

     if(value !== "") { 
      firstImage.attr('src', value); 
     } 
    }); 

    secondImage.click(function(){ 
     firstImage.attr('src', $(this).attr('src')); 
    }); 
}); 
</script> 

測試在這裏:

https://jsfiddle.net/upLdgb8y/1/

+0

輸入在本地存儲上有一個值,所以如果刷新所有更改將會丟失。我從輸入值更改圖像,我有一個img存儲。每當你點擊存儲器上的img輸入改變,然後img也會這樣做。我沒有意味着改變圖像點擊第二個img,但輸入 – Gabry

+0

好吧,只需要改變模糊來改變兄弟? –