JavaScript - 用户选择功能答案

【问题标题】：JavaScript - user selection functionJavaScript - 用户选择功能
【发布时间】：2016-09-17 16:16:44
【问题描述】：

我是 JavaScript 新手，我正在做一些事情。 This 是我到目前为止所达到的，这是我的代码：

<!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 个图像。

非常感谢您的帮助。提前致谢！

【问题讨论】：

标签： javascript jquery html css function

【解决方案1】：

您在 id 和 50px 上都缺少引号。但最好为选择定义一个样式。

然后让点击处理程序首先从所有图像中删除该样式，除了点击的图像，它应该设置该样式。函数.classList.add 和.classList.remove 可以用于此。

如果你目前有document.getElementById('image1')，你会这样做：

document.querySelector('.selected')

然后，您还应该确保页面加载时选择了一张图片，即使用 selected 类。

其他一些改进确保在更改选择时，不透明度滑块也与该图像的当前不透明度设置保持一致。

这是一个可以做所有这些的 sn-p：

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">

【讨论】：

非常感谢！这完全按照我想要的方式工作，除了着色功能。我确信这是一个小错误，因为我对此完全陌生，所以我无法弄清楚。
我确实有关于颜色/灰度的错误。现在应该修好了。我还添加了一行将此设置分配给 filter 样式属性，以便它也可以在 FireFox 中使用。
所以我在这里和那里添加了一些东西，这就是我现在拥有的(jsfiddle)，这里是页面link。我第一次选择其中一个图像时，会出现边框。但是在我单击重置按钮并尝试再次选择图像后，图像被选中但没有显示边框。
如果您有新问题，请为它创建一个。这些评论部分不适合（也不打算）用于后续问题。如果您发布新问题，请告诉我，我会很乐意查看。请注意查看控制台是否有错误。在 jsfiddle 中有关于 changeOpacity 和 select 未定义（作为函数）的错误。

【解决方案2】：

首先-您没有使用该 imgID，而是使用该变量之类的字符串。改为：

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

然后当你对图像做某事时，不要使用“image1”，而是activeImage，它是全局变量（在函数外部和函数之前定义）。

至于新上传的图片：
将其放入另一个 div 并使用此类算法 -

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

【讨论】：

感谢您的帮助！我不太明白你所说的“activeImage”是什么意思。我使用 image1、image2、image3，所以我可以命名我拥有的所有 3 个图像。如果您能再解释一下，我将不胜感激，再次感谢！
activeImage 只是一个变量，用于存储所选图像的 id。即当您单击第二个时，activeImage 将是“image2”。当您调用这些编辑函数时，您使用的不是静态“image1”，而是存储所需值（最后选择的图片的 ID）的变量。