谁帮我一下ID组的问题要怎么才能解决不能显示一个效果

Question

本帖最后由 ganqi123 于 2012-09-30 20:37:14 编辑

Answer 1

第一：ID不要重复，document.getElementById('dhp')将只能返回第一个div对象
第二：这种状态值，完全可以在后台输出之前进行处理。
第三：你这些状态太凌乱了，可能结构设计上存在问题。应该不至于一个对象会同时存在新加,连载,完结三种状态才是。普通也就是连载和完结两种状态，最多你再额外根据一个上架时间多长以内附加一个新加状态
第三：你如果一定要前端进行处理的话
<style type="text/css">
div,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;position:relative;}
#dhp{ width:500px; }#dhp li{ width:100px; height:150px; border:1px solid #ddd; padding:5px; float:left; margin-right:5px}#dhp span{display:inline-block; width:49px; height:49px; position:absolute;top:5px;right:5px;background:url(dhp-stats.gif) no-repeat;}#dhp span.gx{background:red;}
#dhp span.qj{background:green;}
#dhp span.xj{background:blue;}
</style>
<div id="container">
    <div id="dhp">
        <ul>
            <li><span state="新加">1</span></li>
            <li><span state="连载至40集">2</span></li>
            <li><span state="完结">3</span></li>
        </ul>
    </div>
    <div id="dhp">
        <ul>
            <li><span state="新加"></span>1</li>
            <li><span state="连载至100集">2</span></li>
            <li><span state="完结"></span>3</li>
        </ul>
    </div>
</div>
第一种方法：[推荐]将你所有的dhp用一个div包裹起来，然后再获取下面所有的span元素
var dhp = document.getElementById("container");
var child=dhp.getElementsByTagName('span');
for(i = 0; i <child.length;i++){
    var the = child[i];
    for(var k = 0; k <= 1000; k++){
        state = the.getAttribute('state');
        if(state == '新加') the.className = 'xj';
        if(state.indexOf('连载至' + [k] +'集') != -1) the.className = 'gx';
        if(state == '完结') the.className = 'qj';
      }
}[仅参考]下面这种是一种参考方法，相对于第一种来讲，效率较低。思路就是：扩展了一个兼容IE下根据样式命名来获取对象的方法，然后进行遍历。而且结构设计也需要变更为：
<style type="text/css">
div,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;position:relative;}
.dhp{ width:500px; }.dhp li{ width:100px; height:150px; border:1px solid #ddd; padding:5px; float:left; margin-right:5px}.dhp span{display:inline-block; width:49px; height:49px; position:absolute;top:5px;right:5px;background:url(dhp-stats.gif) no-repeat;}.dhp span.gx{background:red;}
.dhp span.qj{background:green;}
.dhp span.xj{background:blue;}
</style>
<div class="dhp">
    <ul>
        <li><span state="新加">1</span></li>
        <li><span state="连载至40集">2</span></li>
        <li><span state="完结">3</span></li>
    </ul>
</div>
<div class="dhp">
    <ul>
        <li><span state="新加"></span>1</li>
        <li><span state="连载至100集">2</span></li>
        <li><span state="完结"></span>3</li>
    </ul>
</div>
<script type="text/javascript">
Array.prototype.inArray=function (value){for (var i=0;i<this.length;i++){if (this[i] == value){return true;}}return false};
function getElementsByClassName(className){
    if(document.getElementByClassName){
        return document.getElementByClassName(className)
    }
    var eles=document.getElementsByTagName("*"),elements=[];
    for(var i=0;i<eles.length;i++){
        var arr=eles[i].className.split(' ');
        if(arr.inArray(className)){
            elements.push(eles[i]);
        }
    }
    return elements;
}var dhp = getElementsByClassName("dhp");
for(i=0;i<dhp.length;i++){
    var child=dhp[i].getElementsByTagName('span');
    for(j = 0; j <child.length;j++){
        var the = child[j];
        for(var k = 0; k <= 1000; k++){
            state = the.getAttribute('state');
            if(state == '新加') the.className = 'xj';
            if(state.indexOf('连载至' + [k] +'集') != -1) the.className = 'gx';
            if(state == '完结') the.className = 'qj';
          }
    }
}</script>
呵呵，有点罗嗦了，我权当练手了