javascript - 使用复选框更改 img 类

Question

<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 不起作用)或者是否有更简单或更动态的方法来做到这一点？

Answer 1

jsFiddle here.

我在下面概述了一种简单的方法(我假设您只需要纯 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 对于适应性函数的答案的替代方案可能如下所示。

首先，check this new 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 的基础知识是如何工作的，所以希望你可以开始自己改进它。