Question

我有一个简单的JS脚本来交换包含Flash的元素，并将其替换为未安装Flash的用户的其他格式。

var hideclass="hidden"
var showclass="empty"


function flashFixMain(){    
if (swfobject.hasFlashPlayerVersion("7.0.0")) {

    document.getElementById('logoflash').className=showclass;
    document.getElementById('logononflash').className=hideclass;

} else {

    document.getElementById('logoflash').className=hideclass;
    document.getElementById('logononflash').className=showclass;

    }
}

简而言之，它不起作用。

if语句正常工作 - 在适当的位置发出警告弹出正常。
我已经在线检查了相应页面的来源，并且元素名称完全按照书面形式弹出（只有一次！）。
类名称可以正常工作，因为它们在开始时用作页面上的默认值。

所有人都有任何想法，我可能错过了什么？

Answer 1

更改

document.getElementById('logoflash').class=showclass;

到

document.getElementById('logoflash').className = showclass;

它是className，而不是class

Answer 2

您需要使用.className属性，而不是使用.class;例如：

document.getElementById('logoflash').className = showclass;

在现代浏览器中，您还可以使用.classList添加类而不是替换所有现有类：

document.getElementById('logoflash').classList.add(showclass);

顺便说一下，你可以考虑像这样移动一些陈述：

var hasFlash = swfobject.hasFlashPlayerVersion("7.0.0"),
logoFlash = document.getElementById('logoflash'),
logoNonFlash = document.getElementById('logononflash');

logoFlash.className = hasFlash ? showclass : hideclass;
logoNonFlash.className = hasFlash ? hideclass : showclass;

Answer 3

我编写了一个快速测试方案，但没有看到更多的环境，看不到任何应该阻止它按预期工作的内容。

我在使用jQuery进行写操作时注意到的一件事（我想你不使用？）是你的'addClass'实际上是一个'REPLACE'类值。您只需将其设置为单个类。

这让我觉得，在没有看到你的环境的情况下，某些其他类可能已经被分配给你的元素被淘汰了。如果您的某些显示依赖于这些其他类，这可能会导致意外行为...

如果没有看到更多您的场景，那么这就是唯一可能出现问题的事情。

无论如何，这是我的测试设置。你可能会发现这个有用的东西。

<div id="logoflash" class='something'>
    Logoflash
</div>

<div id="logononflash" class='else' >
    logononflash
</div>



<script>

var swfobject = {FlashPlayerVersion: '7.0.1', hasFlashPlayerVersion: function(v) {if(v == this.FlashPlayerVersion) return true; else return false;}, myName: 'fakeSWObject' };
console.log(swfobject)

var hideclass = "hidden"
var showclass = "empty"
var getById = function(sID) { return document.getElementById(sID); };
var addClass = function(sID, sClass) { getById(sID).className += ' ' + sClass  };

function toggleEl(sID, bState){
    console.log('begin toggleEl')
    console.log('bState: ' + bState)
    try {
        if(bState == undefined) {
            console.log('Toggling by element state');
            getById(sID).style.display = getById(sID).style.display == 'none' ? 'block' : 'none';
        } else {
            console.log('Toggling by argument');
            getById(sID).style.display = !!bState ? 'block' : 'none';
        }

    } catch (err) {
        console.log(err);
    }
}

function flashFixMain(){

  if (swfobject.hasFlashPlayerVersion("7.0.0")) {
    console.log('Is Flash 7.0.0');
    toggleEl('logoflash', true);
    toggleEl('logononflash', false);
    addClass('logoflash', hideclass);
    addClass('logononflash', showclass);

} else {
    console.log('Is NOT Flash 7.0.0');
    toggleEl('logoflash', true)
    toggleEl('logononflash', false)
    addClass('logoflash', showclass);
    addClass('logononflash', hideclass);
    }
}


$(function(){ // Yes, this is jQuery to fire after doc is ready
    flashFixMain();
})

</script>

Answer 4

使用Jquery：

$("#logoflash").addClass(hideclass);

或

$('#logoflash').toggleClass(hideclass, swfobject.hasFlashPlayerVersion("7.0.0"));

getElementById在if语句中不起作用 - 故障排除

4 个答案: