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 - 用户选择功能

回答

相关问题