Question

我是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>

到目前为止，＆＃34;有色＆＃34;，＆＃34; Greyscale＆＃34;和＆＃34; Alternate＆＃34;按钮以及不透明度滑块仅适用于第一张图像（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张图像。

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

Answer 1

首先 - 你没有使用那个imgID，但是像那个变量一样使用String。更改为：

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

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

新上传的图片：
把它放到另一个div中并使用这样的算法 -

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

Answer 2

您在ID和50px上都缺少引号。但最好为选择定义一种风格。

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

您目前拥有document.getElementById('image1')的位置，您可以改为：

document.querySelector('.selected')

然后你还应该确保页面加载时选择了一个图像，即selected类。

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

以下是完成所有操作的代码段：

＆＃13;

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());
}

＆＃13;

.selected {
  border: 1px solid;
}

＆＃13;

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

＆＃13;

JavaScript - 用户选择功能

2 个答案: