Question

<script type="text/javascript">代码</script> 转到.js里面

<a class="fun_down" href="javascript:;" onclick="changeCss(this)">宽屏</a></div>//调用
//js代码
<script type="text/javascript">
function changeCss(obj){
var inner=obj.parentNode.innerHTML;
if(inner.indexOf("窄屏")>=0){
obj.parentNode.innerHTML=obj.parentNode.innerHTML.replace("窄屏","宽屏");
}else if(inner.indexOf("宽屏")>=0){
obj.parentNode.innerHTML=obj.parentNode.innerHTML.replace("宽屏","窄屏");
}
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].className=="player"){
divs[i].className="kuanping";
}else if(divs[i].className=="kuanping"){
divs[i].className="player";
}
}
}
</script>
我想把这JS代码转成<script type="text/javascript" src="/daima.js" charset="utf-8"></script>应该怎么转呢?

Answer 1

给a标签加个id：<a class="fun_down" id="fun_down" href="javascript:;" onclick="changeCss(this)">宽屏</a>

然后把下面这段拷到daima.js里就行了

function changeCss(obj){
var inner=obj.parentNode.innerHTML;
if(inner.indexOf("窄屏")>=0){
obj.parentNode.innerHTML=obj.parentNode.innerHTML.replace("窄屏","宽屏");
}else if(inner.indexOf("宽屏")>=0){
obj.parentNode.innerHTML=obj.parentNode.innerHTML.replace("宽屏","窄屏");
}
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].className=="player"){
divs[i].className="kuanping";
}else if(divs[i].className=="kuanping"){
divs[i].className="player";
}
}
}
document.getElementById("fun_down").onclick = function(){
changeCss(this)
}

追问

谢谢朋友,代码能用,但宽屏这里的宽屏2字点击不会切换为窄屏了.

追答

帮你看了一下changeCss，觉得你写复杂了，代码改一下就行：

function changeCss(obj){
    var inner=obj.innerHTML;
    if(inner.indexOf("窄屏")!=-1){
        obj.innerHTML=("宽屏");
    }else if(inner.indexOf("宽屏")!=-1){
        obj.innerHTML=("窄屏");
    }
    var divs=document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
      if(divs[i].className=="player"){
          divs[i].className="kuanping";
      }else if(divs[i].className=="kuanping"){
          divs[i].className="player";
      }
    }
}
document.getElementById("fun_down").onclick = function(){
    changeCss(this);
}

追问

很棒! 可是还是代码写到.js里面
宽屏 这里的宽屏2个字点击切换后不会切换为窄屏2个字
不写到.js可以切换

追答

这个没问题啊，怎么会不能切换，我测试都没问题的？

哦，对了，你可以把宽屏里面的onclick="changeCss(this)"去掉

追问

您好,首先感谢朋友不耐烦的解答,我是想说
宽屏

这样调用JS,能切换 但显示的按钮-宽屏二字不切换成窄屏
如果按下面调用就能正常
宽屏

代码...

追答

我这边是没什么问题的，可能是那个括号的原因，你试下这个：

function changeCss(obj){
    var inner=obj.innerHTML;
    if(inner.indexOf("窄屏")!=-1){
        obj.innerHTML="宽屏";
    }else if(inner.indexOf("宽屏")!=-1){
        obj.innerHTML="窄屏";
    }
    var divs=document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        if(divs[i].className=="player"){
            divs[i].className="kuanping";
        }else if(divs[i].className=="kuanping"){
            divs[i].className="player";
        }
    }
}
document.getElementById("fun_down").onclick = function(){
    changeCss(this);
    return false;
}

追问

一样的, 会不会是与其它代码冲突了. 网站有jquery.js
谢谢你了,

追答

这是用原生js写的，应该不存在库冲突问题，你用什么浏览器？

还有一种可能，你的a标签里存在空格，或者是html文档与js文档编码不一至引起的（建议你全部改成utf-8），下面的代码增加了去掉两边空格的操作：

function changeCss(obj){
    var inner=obj.innerHTML.replace(/(^\s*)|(\s*$)/g, "");
    if(inner.indexOf("窄屏")!=-1){
        obj.innerHTML="宽屏";
    }else if(inner.indexOf("宽屏")!=-1){
        obj.innerHTML="窄屏";
    }
    var divs=document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        if(divs[i].className=="player"){
            divs[i].className="kuanping";
        }else if(divs[i].className=="kuanping"){
            divs[i].className="player";
        }
    }
}
document.getElementById("fun_down").onclick = function(){
    changeCss(this);
    return false;
}

Answer 2

1. 新建一个名为daima.js的文件在应用根目录下面

2. 文件编码使用utf-8

3. 把<script type="text/javascript">和</script>中间的内容拷贝到新建的daima.js中

4. 把<script type="text/javascript" src="/daima.js" charset="utf-8"></script>放到html的head中

追问

感谢回答,这样的我试过,会提示obj会定义