如何使函数与相同的类一起工作？
Posted
技术标签:
【中文标题】如何使函数与相同的类一起工作？【英文标题】：How to make function work with the same classes? 【发布时间】：2016-01-24 05:01:02 【问题描述】：我找到了一个不错的脚本。除了一件事情，一切都很好；当我尝试插入第二个列表时 - 它不起作用。 当您想要打开第二个区块时，第一个区块会继续进行。
我尝试添加不同的类，但不幸的是，它对我不起作用。 我哪里错了？
function tamingselect()
if(!document.getElementById && !document.createTextNode)return;
// Classes for the link and the visible dropdown
var ts_selectclass='turnintodropdown'; // class to identify selects
var ts_listclass='turnintoselect'; // class to identify ULs
var ts_boxclass='dropcontainer'; // parent element
var ts_triggeron='activetrigger'; // class for the active trigger link
var ts_triggeroff='trigger'; // class for the inactive trigger link
var ts_dropdownclosed='dropdownhidden'; // closed dropdown
var ts_dropdownopen='dropdownvisible'; // open dropdown
/*
Turn all selects into DOM dropdowns
*/
var count=0;
var toreplace=new Array();
var sels=document.getElementsByTagName('select');
for(var i=0;i<sels.length;i++)
if (ts_check(sels[i],ts_selectclass))
var hiddenfield=document.createElement('input');
hiddenfield.name=sels[i].name;
hiddenfield.type='hidden';
hiddenfield.id=sels[i].id;
hiddenfield.value=sels[i].options[0].value;
sels[i].parentNode.insertBefore(hiddenfield,sels[i])
var trigger=document.createElement('a');
ts_addclass(trigger,ts_triggeroff);
trigger.href='#';
trigger.onclick=function()
ts_swapclass(this,ts_triggeroff,ts_triggeron)
ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
return false;
trigger.appendChild(document.createTextNode(sels[i].options[0].text));
sels[i].parentNode.insertBefore(trigger,sels[i]);
var replaceUL=document.createElement('ul');
for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
var newli=document.createElement('li');
var newa=document.createElement('a');
newli.v=sels[i].getElementsByTagName('option')[j].value;
newli.elm=hiddenfield;
newli.istrigger=trigger;
newa.href='#';
newa.appendChild(document.createTextNode(
sels[i].getElementsByTagName('option')[j].text));
newli.onclick=function()
this.elm.value=this.v;
ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
return false;
newli.appendChild(newa);
replaceUL.appendChild(newli);
ts_addclass(replaceUL,ts_dropdownclosed);
var div=document.createElement('div');
div.appendChild(replaceUL);
ts_addclass(div,ts_boxclass);
sels[i].parentNode.insertBefore(div,sels[i])
toreplace[count]=sels[i];
count++;
/*
Turn all ULs with the class defined above into dropdown navigations
*/
var uls=document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++)
if(ts_check(uls[i],ts_listclass))
var newform=document.createElement('form');
var newselect=document.createElement('select');
for(j=0;j<uls[i].getElementsByTagName('a').length;j++)
var newopt=document.createElement('option');
newopt.value=uls[i].getElementsByTagName('a')[j].href;
newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerhtml));
newselect.appendChild(newopt);
newselect.onchange=function()
window.location=this.options[this.selectedIndex].value;
newform.appendChild(newselect);
uls[i].parentNode.insertBefore(newform,uls[i]);
toreplace[count]=uls[i];
count++;
for(i=0;i<count;i++)
toreplace[i].parentNode.removeChild(toreplace[i]);
function ts_check(o,c)
return new RegExp('\\b'+c+'\\b').test(o.className);
function ts_swapclass(o,c1,c2)
var cn=o.className
o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
function ts_addclass(o,c)
if(!ts_check(o,c))o.className+=o.className==''?c:' '+c;
window.onload=function()
tamingselect();
// add more functions if necessary
.dropcontainer
position: relative;
font-size: 13px;
color: #777;
.trigger
color: #777;
padding: 5px;
font-size: 13px;
width: 90%;
margin: 10px 15px 10px 0;
background: #fff url('../img/select-arrow-open.gif') right center no-repeat;
display: block;
float: right;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.trigger:hover
color: #777;
background: #f5f5f5 url(../img/select-arrow-open.gif) right center no-repeat;
.activetrigger
color: #777;
padding: 5px;
font-size: 13px;
width: 90%;
margin: 10px 15px 10px 0;
background: #f5f5f5 url(../img/select-arrow-close.gif) right center no-repeat;
display: block;
float: right;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.activetrigger:hover
background: #f5f5f5 url(../img/select-arrow-close.gif) right center no-repeat;
color: #777;
.activetrigger:active
background: #f5f5f5 url(../img/select-arrow-close.gif) right center no-repeat;
color: #777;
.dropcontainer ul
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
background: #fff;
list-style-type: none;
padding: 5px;
top: 40px;
right: 15px;
width: 90%;
z-index: 100;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.dropcontainer ul li
padding: 5px;
.dropcontainer ul li:hover
background: #f5f5f5;
outline: none;
.dropcontainer ul li:first-child
display: none;
.dropcontainer ul li:last-child
border-bottom: none;
.dropdownhidden
display: none;
.dropdownvisible
height: 150px;
overflow-y: scroll;
<form action="#">
<select class="turnintodropdown" id="1" name="1">
<option>11111111111111</option>
<option>11111111111111</option>
<option>11111111111111</option>
<option>11111111111111</option>
<option>11111111111111</option>
</select>
<select class="turnintodropdown" id="2" name="2">
<option>22222222222222</option>
<option>22222222222222</option>
<option>22222222222222</option>
<option>22222222222222</option>
<option>22222222222222</option>
</select>
</form>【问题讨论】：
您是否尝试过将第二个类重命名为：<select class="turnintodropdown2" id="2" name="2"> 在脚本中使用 var ts_selectclass='turnintodropdown2';？
但是我需要他们两个都工作，那么我应该对第一个做什么？我试过这样做，但第一个带来了一些问题
我只是在小提琴中运行它，似乎按预期运行：jsfiddle.net/psyonix/qm9222o4
看起来很奇怪，但它不适用于我的风格
如果 jQuery 可用，正如它从您的标签中显示的那样，那么您为什么不使用它呢？如果没有，则删除 [jQuery] 标签。
【参考方案1】：
小提琴：http://jsfiddle.net/psyonix/g8n2vojw/1/
标记：
<form action="#">
<select class="turnintodropdown" id="1" name="1">
<option>11111111111111</option>
<option>11111111111111</option>
<option>11111111111111</option>
<option>11111111111111</option>
<option>11111111111111</option>
</select>
<select class="turnintodropdown2" id="2" name="2">
<option>22222222222222</option>
<option>22222222222222</option>
<option>22222222222222</option>
<option>22222222222222</option>
<option>22222222222222</option>
</select>
</form>
脚本：
function tamingselect()
if(!document.getElementById && !document.createTextNode)return;
// Classes for the link and the visible dropdown
var ts_selectclass='turnintodropdown2';
var ts_selectclass='turnintodropdown'; // class to identify selects
var ts_listclass='turnintoselect'; // class to identify ULs
var ts_boxclass='dropcontainer'; // parent element
var ts_triggeron='activetrigger'; // class for the active trigger link
var ts_triggeroff='trigger'; // class for the inactive trigger link
var ts_dropdownclosed='dropdownhidden'; // closed dropdown
var ts_dropdownopen='dropdownvisible'; // open dropdown
/*
Turn all selects into DOM dropdowns
*/
var count=0;
var toreplace=new Array();
var sels=document.getElementsByTagName('select');
for(var i=0;i<sels.length;i++)
if (ts_check(sels[i],ts_selectclass))
var hiddenfield=document.createElement('input');
hiddenfield.name=sels[i].name;
hiddenfield.type='hidden';
hiddenfield.id=sels[i].id;
hiddenfield.value=sels[i].options[0].value;
sels[i].parentNode.insertBefore(hiddenfield,sels[i])
var trigger=document.createElement('a');
ts_addclass(trigger,ts_triggeroff);
trigger.href='#';
trigger.onclick=function()
ts_swapclass(this,ts_triggeroff,ts_triggeron)
ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
return false;
trigger.appendChild(document.createTextNode(sels[i].options[0].text));
sels[i].parentNode.insertBefore(trigger,sels[i]);
var replaceUL=document.createElement('ul');
for(var j=0;j<sels[i].getElementsByTagName('option').length;j++)
var newli=document.createElement('li');
var newa=document.createElement('a');
newli.v=sels[i].getElementsByTagName('option')[j].value;
newli.elm=hiddenfield;
newli.istrigger=trigger;
newa.href='#';
newa.appendChild(document.createTextNode(
sels[i].getElementsByTagName('option')[j].text));
newli.onclick=function()
this.elm.value=this.v;
ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff);
ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed)
this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
return false;
newli.appendChild(newa);
replaceUL.appendChild(newli);
ts_addclass(replaceUL,ts_dropdownclosed);
var div=document.createElement('div');
div.appendChild(replaceUL);
ts_addclass(div,ts_boxclass);
sels[i].parentNode.insertBefore(div,sels[i])
toreplace[count]=sels[i];
count++;
/*
Turn all ULs with the class defined above into dropdown navigations
*/
var uls=document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++)
if(ts_check(uls[i],ts_listclass))
var newform=document.createElement('form');
var newselect=document.createElement('select');
for(j=0;j<uls[i].getElementsByTagName('a').length;j++)
var newopt=document.createElement('option');
newopt.value=uls[i].getElementsByTagName('a')[j].href;
newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML));
newselect.appendChild(newopt);
newselect.onchange=function()
window.location=this.options[this.selectedIndex].value;
newform.appendChild(newselect);
uls[i].parentNode.insertBefore(newform,uls[i]);
toreplace[count]=uls[i];
count++;
for(i=0;i<count;i++)
toreplace[i].parentNode.removeChild(toreplace[i]);
function ts_check(o,c)
return new RegExp('\\b'+c+'\\b').test(o.className);
function ts_swapclass(o,c1,c2)
var cn=o.className
o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
function ts_addclass(o,c)
if(!ts_check(o,c))o.className+=o.className==''?c:' '+c;
window.onload=function()
tamingselect();
// add more functions if necessary
【讨论】：
是的，它确实有效，但是第二个不想获取样式，并且看起来像默认的 您指的是表单使用的 CSS 吗？如果是这样，是否愿意发布？以上是关于如何使函数与相同的类一起工作？的主要内容，如果未能解决你的问题，请参考以下文章
使 isinstance(obj, cls) 与装饰类一起工作