<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
不起作用)还是有更容易或更有活力的方式这样做?
答案 0 :(得分:2)
我已经概述了一种简单的方法(我假设你只是想在这里使用纯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对自适应功能的回答的替代方法可能如下所示。
<强> 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工作,所以希望你可以自己开始改进它。
答案 1 :(得分: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>
编辑2:我看到你在你的问题中添加了你的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";
}
}
}