JavaScript - 用戶選擇功能

-2

我是JavaScript新手，我正在做一些事情。 This是我到目前爲止已經達到了，這裏是我的代碼：JavaScript - 用戶選擇功能

<!DOCTYPE html> 
<html> 
<head> 
<title>Image Editor V 1.0</title> 
<script> 
function changeOpacity(newValue) { 
    document.getElementById("span").innerHTML = newValue*100 +'%'; 
    document.getElementById("image1").style.opacity = newValue; 
} 

var color = true; 

function imgColor() { 
    if (color) { 
     document.getElementById("image1").style.WebkitFilter = "grayscale(100%)"; 
     color = false; 
    } else { 
     document.getElementById("image1").style.WebkitFilter = "none"; 
     color = true; 
    } 
} 

function colorImg() { 
    document.getElementById("image1").style.WebkitFilter = "none"; 
} 

function greyImg() { 
    document.getElementById("image1").style.WebkitFilter = "grayscale(100%)"; 
} 

function userImage() { 
    var link = document.getElementById("userImg").value; 
    document.getElementById("image1").src = link; 
} 
</script> 
</head> 
<body> 

<button onclick="colorImg()">Colored</button> 
<button onclick="greyImg()">Greyscale</button> 
<button onclick="imgColor()" >Alternate</button><br><br> 

Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/> 
<span id="span">100%</span> <br><br> 

Try your own image! <input id="userImg" type="text" placeholder="Enter url here"> 
<button onclick="userImage()">Go!</button> 
<br><br> 

<img class="myImages" id="image1" src="image4.jpg"> 
<img class="myImages" id="image2" src="image2.jpg"> 
<img class="myImages" id="image3" src="image3.jpg"> 

</body> 
</html>

到目前爲止，「彩色」，「灰度」，並與透明度滑塊工作沿着「備用」按鈕，因爲只有預期的第一張圖片（image1.jpg）。而且，當用戶輸入他自己的圖像時，它會替換第一個圖像，並按照預期對其執行功能。 這裏是我想要做：

1 - 讓用戶選擇他想要通過點擊它來編輯三幅圖像，然後應用它周圍的邊框，並在其他功能使用它（灰度和不透明度）。下面是我試了一下（但不工作）：

<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)"> 
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)"> 
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)"> 

function selectImg(imgID) { 
    document.getElementById("imgID").style.border = 50px; 
}

2 - 當用戶輸入自己的形象，我想它來代替所有的3張圖片我已經默認顯示。

非常感謝您的幫助。提前致謝！

來源

2016-09-17 Mina Bolis

你缺少的ID和50px報價兩者。但最好爲選擇定義一種風格。

然後，讓點擊處理程序首先從所有圖像中移除該樣式，除了點擊的圖像，它應該設置該樣式。可以使用功能.classList.add和.classList.remove。

如果您目前有document.getElementById('image1')，你會怎麼做，而不是：

document.querySelector('.selected')

那麼你也應該確保所選擇的頁面加載一個圖像，即與selected類。

其他一些改進可確保在更改選區時，不透明度滑塊也與該圖像的當前不透明度設置一致。

這裏是一個片段，做一切：

function changeOpacity(newValue) { 
 
    document.getElementById("span").textContent = newValue*100 +'%'; 
 
    document.querySelector(".selected").style.opacity = newValue; 
 
    document.querySelector('input[type=range]').value = newValue; 
 
} 
 

 
function getOpacity() { 
 
    return parseFloat(document.querySelector(".selected").style.opacity || '1'); 
 
} 
 

 
function isColor() { 
 
    return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)"; 
 
} 
 

 
function imgColor() { 
 
    document.querySelector(".selected").style.filter = 
 
    document.querySelector(".selected").style.WebkitFilter = 
 
     isColor() ? "grayscale(100%)" : "none"; 
 
} 
 

 
function colorImg() { 
 
    if (!isColor()) imgColor() 
 
} 
 

 
function greyImg() { 
 
    if (isColor()) imgColor() 
 
} 
 

 
function userImage() { 
 
    document.querySelector(".selected").src = document.getElementById("userImg").value; 
 
} 
 

 
// Add this function, and call it on click on an image 
 
function select(img) { 
 
    Array.from(document.querySelectorAll('.myImages')).forEach( 
 
     myImg => myImg === img ? myImg.classList.add('selected') 
 
           : myImg.classList.remove('selected') 
 
    ); 
 
    // bring opacity slider in line with selected image 
 
    changeOpacity(getOpacity()); 
 
}

.selected { 
 
    border: 1px solid; 
 
}

<button onclick="colorImg()">Colored</button> 
 
<button onclick="greyImg()">Greyscale</button> 
 
<button onclick="imgColor()">Alternate</button><br><br> 
 

 
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/> 
 
<span id="span">100%</span> <br><br> 
 

 
Try your own image! <input id="userImg" type="text" placeholder="Enter url here"> 
 
<button onclick="userImage()">Go!</button> 
 
<br><br> 
 

 
<img class="myImages selected" id="image1" onclick="select(this)" 
 
    src="//cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4"> 
 
<img class="myImages" id="image2" onclick="select(this)" 
 
    src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> 
 
<img class="myImages" id="image3" onclick="select(this)" 
 
    src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">

來源

2016-09-17 17:07:02 trincot

非常感謝！除了着色功能之外，它的工作方式與我想要的完全相同。肯定這是一個小錯誤，我無法弄清楚它是否完全是新的。 –

我確實有關於顏色/灰度的錯誤。現在應該修好了。我還添加了一行將此設置分配給'filter' style屬性，以便它在FireFox中也能正常工作。 – trincot

所以我在這裏和那裏添加了一些東西，這就是我現在擁有的[（jsfiddle）]（https://jsfiddle.net/bhvcr035/），這裏是頁面[link]（http://web.csulb.edu /〜mmessiha/cecs110 /的MyStuff /）。第一次選擇其中一個圖像時，顯示邊框。但是，當我點擊我的重置按鈕並嘗試再次選擇圖像後，圖像被選中，但沒有顯示邊框。 –

首先 - 您沒有使用該imgID，而是使用該字符串作爲該變量。更改爲：

function selectImg(imgID) { 
    document.getElementById(imgID).style.border = 50px; //notice no quotes for imgID 
    activeImage = imgID; //set activeImage ID 
}

然後當你正在做的事情爲圖像，不要使用「圖像1」，但activeImage是全局變量（外和之前的功能定義）。

而且爲新上傳的圖像：
把它放進另一個DIV和與該算法的工作 -

when (uploaded_new) 
    hide default pics 
    show DIV with new image 
    activeImage = uploadedPic

來源

2016-09-17 16:31:40

感謝您的幫助！我不太明白「activeImage」的含義。我去image1，image2，image3，所以我可以命名我所有的3個圖像。如果你能解釋一點，我會很感激，再次感謝！ –

activeImage只是一個變量，用於存儲所選圖像的ID。即當你點擊第二個，activeImage將是「image2」。當你調用這些編輯函數時，而不是使用靜態的「image1」，它使用變量來存儲所需的值（最後選擇的圖片的ID）。 –

JavaScript - 用戶選擇功能

回答

相關問題