0 
<div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

我的 javascript 有问题要更改

<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">

带复选框的类<input type="checkbox">。当复选框被选中时，img 类将从“unmarkedImg”更改为“markedImg”，当您选中复选框时，更改将反转。

    <div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img2.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img3.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img4.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

如果我可以打扰另一个问题。我将如何更改您提供的 javascript，而不是一个人做同样的事情。如果您选中其中一个框，则该复选框的图像会从“unmarkedImg”变为“markedImg”，然后反转。我只是给主题自己的“id”（因为ElementByClassName("class").onclick/onchange不起作用）还是有更简单或更动态的方式来做到这一点？

4

2 回答 2

2

jsFiddle在这里。

我在下面概述了一种简单的方法（我假设您在这里只想要纯 JavaScript）并附有解释：

HTML：

<img id="theImage" src="pics/flowers/f0.jpg" alt="Liten bild" class="unmarkedImg">
<input onclick="toggleImgClass()" id="example" type="checkbox">

Javascript：

function toggleImgClass(){
  var example = document.getElementById('example');
  // Set a variable for the checkbox element with the ID 'example' 
  if (example.checked){ // If the checkbox is checked
    document.getElementById("theImage").className = "markedImg"; 
    // Other classes are removed from the image and replaced with markedImg
  }else{ // Else if the checkbox isn't checked
    document.getElementById("theImage").className = "unmarkedImg";
    // Other classes are removed from the image and replaced with unmarkedImg
  }
}

编辑：在回复您更新的问题时，@smerny 的适应性功能答案的替代方案可能如下所示。

首先，检查这个新的 jsFiddle。

HTML：

<div class="outerBox">
  <img src="http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png" alt="Liten bild" name="images" class="unmarkedImg"/>
  <div class="innerBox">
    <input type="checkbox" onclick="toggleImgClass()" class="example"/>     
    <span>Prästkrage</span>
  </div> 
</div>

Javascript：

function toggleImgClass() {
    var example = document.getElementsByClassName('example');
    // Set a variable for all checkbox elements with the class name 'example'
    for(i=0; i<example.length; i++) { // For each element with the class name 'example'
      if (example[i].checked){ // If this one is checked
        document.getElementsByName("images")[i].className = "markedImg";
        // Set its corresponding image to have the markedImg class.
      }else{
        document.getElementsByName("images")[i].className = "unmarkedImg";
        // Set its corresponding image to have the unmarkedImg class.
      }
    }
}

请注意，使用内联 JavaScript（例如<input onclick="toggleImgClass()">）并不是最佳实践，但在这种情况下，我只是想向您展示 JavaScript 基础知识如何工作的简单示例，因此希望您可以自己开始对其进行改进。

于 2013-05-05T13:38:37.600 回答
0

这是一种在不向元素添加 javascript 的情况下编写它的方法：http: //jsfiddle.net/Jb7yM/

document.getElementById("MyCheckbox").onclick=function() {
    if(this.checked) {
        document.getElementById("MyImage").className = "markedImg";
    } else {
        document.getElementById("MyImage").className = "unMarkedImg";   
    }
}

编辑：如果你想能够做多个图像，你可以这样做：http: //jsfiddle.net/Jb7yM/2/

var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function () {
        var imgNode = this.parentNode.firstChild;
        while (imgNode.tagName != "DIV") { //change to IMG in your case
            imgNode = imgNode.nextSibling
        }
        if (this.checked) {
            imgNode.className = "markedImg";
        } else {
            imgNode.className = "unMarkedImg";
        }
    }
}

并像这样包装您的图像/复选框分组：

<div class="imgGroup">
    <div class="unMarkedImg">img</div><!-- div for example, you'd have an image -->
    <br />
    <input type="checkbox" class="MyCheckbox" />
</div>

Edit2：我看到您将您的 html 添加到您的问题中，这将与您当前的 html 一起使用，而无需在您的元素中添加 onclicks（通常是我一直试图避免的做法），您需要做的就是添加“MyCheckbox”类您的复选框（或将类的名称更改为更适合您的名称）：http: //jsfiddle.net/c8DPz/

var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function () {
        var imgNode = this.parentNode.parentNode.firstChild;
        while(imgNode.tagName != "IMG") { 
            imgNode = imgNode.nextSibling
        }
        if (this.checked) {
            imgNode.className = "markedImg";
        } else {
            imgNode.className = "unMarkedImg";
        }
    }
}
于 2013-05-05T13:40:53.903 回答