Question

您好，

一位朋友给了我这个改变开关按钮类的代码，但我做了一个修改，所以每个按钮改变了2个单独元素的状态，按这样按

function toggleClass(ev){
  var el = document.querySelector(".pressed");
  var fro = document.querySelector(".visible"); <--line added
  el.className = 'notpressed';
  ev.target.className = 'pressed';

  fro.className = 'notvisible'; <--line added
  ev.target.className = 'visible'; <--line added
}

span{
  cursor:pointer;
  padding:10px;
  border:1px solid #FCFCFC;
}
.notpressed{
  background:#CCC;
}
.pressed{
  background: #DFF789;
}
.visible{
  display:block;
}
.notvisible{
  display: none;
}

<span id="but1" class="pressed" onclick="toggleClass(event);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="toggleClass(event);">BUTTON 2</span>

<div id="elem1">hello<div>
<div id="elem2">bye<div>

但它不起作用。我错过了什么？

谢谢。

Answer 1

您没有关闭部分div。请尝试以下方式：

//initial setting
document.getElementById('elem2').className = 'notvisible';
document.getElementById('elem1').className = 'visible';
//on change
function toggleClass(ev){
  var fro = document.querySelector(".visible");
  var fro2 = document.querySelector(".notvisible");
  if(ev.target.id == 'but1'){
	document.getElementById('elem2').className = 'notvisible';
	document.getElementById('elem1').className = 'visible';
	ev.target.className = 'pressed';
	document.getElementById('but2').className = 'notpressed';
  }
  else if(ev.target.id == 'but2'){
	document.getElementById('elem1').className = 'notvisible'; 
	document.getElementById('elem2').className = 'visible';
	ev.target.className = 'pressed';
	document.getElementById('but1').className = 'notpressed';
  }
}

span{
  cursor:pointer;
  padding:10px;
  border:1px solid #FCFCFC;
}
.notpressed{
  background:#CCC;
}
.pressed{
  background: #DFF789;
}
.visible{
  display:block;
}
.notvisible{
  display: none;
}

<span id="but1" class="pressed" onclick="toggleClass(event);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="toggleClass(event);">BUTTON 2</span>



<div id="elem1" class="visible">hello</div>
<div id="elem2" class="notvisible">bye</div>

Answer 2

在您的切换课程功能中，您可以设置班级＆＃39;可见＆＃39;在点击的按钮上。我假设您要在from PIL import Image im = Image.open('image.jpg') im=im.convert('RGB') width, height = im.size pixel_values = list(im.getdata()) #print "widht=",width #print "height=",height #print pixel_values for i in range(width): for j in range(height): r,g,b = im.getpixel((i,j)) if r>=128: r=255,g=0,b=0 elif g>=128: r=0,g=255,b=0 elif b>=128: r=0,g=0,b=255 pixels[i,j] = (r,g,b) im.save('myimage.jpg')或#elem1上设置课程。

您还需要一种方法将按钮元素与您要隐藏或显示的div相关联。

javascript更改切换按钮和元素的类

2 个答案: