IE中的jQuery问题

时间:2011-07-04 11:56:31

标签: jquery internet-explorer coding-style

我的简单jQuery脚本在IE中不起作用。

请帮忙。

整个HTML代码在这里:

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
        var cvalue = $(".space").css("backgroundColor");
        $(".space").css("color",cvalue);    
   });
</script>

<style>
table.tdata td {
    padding: 10px;
}
tr.zrow1 {
    background-color: #ccc
}
tr.zrow2 {
    background-color: #aaa
}
tr.zrow1 td, tr.zrow2 td {
    border-top: 1px solid white;
    border-left: 1px solid #ccc;
}
table.tdata tr.thead1 {
    text-align: center;
}

table.tdata tr.thead {
    background-color: #003;
    color: white;
    text-align: center;
}
.thrColFixHdr #header h1 {
    margin: 0; 
    padding: 10px 0; 
}
.thrColFixHdr #mainContent {
    margin: 0 200px; 
    padding: 0 10px; 
}
</style>

<div id="areaRec">
<h2 style="margin-top: 0pt;">Sample text</h2>
<p>Sample text  Sample text Sample text Sample text Sample text Sample text Sample text Sample text<span class="space">_</span>text Sample text Sample text Sample text Sample text<br />text Sample text Sample text Sample text Sample text text Sample text Sample text Sample text Sample text text Sample text Sample text Sample text Sample text text Sample text Sample text Sample text Sample text text Sample text Sample text Sample text Sample text</p>
<h3 style="margin-top: 0pt;">text Sample text Sample text </h3>
<p>Sample textSample textSample textSample textSample textSample text<span class="space">_</span>Sample textSample textSample textSample textSample text<span class="space">_</span>Sample textSample textSample text  textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample text.</p>
<h3 style="margin-top: 0pt;">Sample textSample textSample textSample text</h3>
<div class="show_job">
<table class="job-position" border="0" cellspacing="1" cellpadding="4">
<tbody>
<tr class="zrow2">
<td class="title-col" width="181" valign="top">Sample text</td>
<td width="457" valign="top">
<ul>
<li>text Sample text Sample text Sample text Sample text<span class="space">_</span>Sample text</li>
<li>text Sample text Sample text Sample text Sample text<span class="space">_</span>Sample text</li>
<li>text Sample text Sample text Sample text Sample text<span class="space">_</span>Sample text Sample text<span class="space">_</span>Sample text:</li>
</ul>
<blockquote><ol>
<li>Adobe Photoshop</li>
<li>Adobe InDesign</li>
<li>Adobe Illustrator</li>
</ol><ol> </ol></blockquote>
<blockquote><ol> </ol></blockquote>
</td>
</tr>
<tr class="zrow1">
<td class="title-col" width="181" valign="top">Sample text</td>
<td width="457" valign="top">Sample text</td>
</tr>
<tr class="zrow2">
<td class="title-col" width="181" valign="top">Sample text</td>
<td width="457" valign="top">Sample text</td>
</tr>
<tr class="zrow1">
<td class="title-col" width="181" valign="top">Sample text</td>
<td width="457" valign="top">Sample text</td>
</tr>
<tr class="zrow2">
<td class="title-col" width="181" valign="top">Sample text </td>
<td width="457" valign="top">Sample text</td>
</tr>
<tr class="zrow1">
<td class="title-col" width="181" valign="top">Sample text </td>
<td width="457" valign="top">Sample text<span class="space">_</span>Sample textSample textSample textSample text<span class="space">_</span>Sample textSample textSample textSample textSample text </td>
</tr>
</tbody>
</table>
</div>
</div>

我认为IE不了解css中的透明值,任何解决方案?

最终解决方案:

$('.space').each(function(index, value){
var cvalue = $(".space").css("backgroundColor");
if(cvalue == '' || cvalue == 'transparent'){
 var pcolor = ($(this).closest('div, p, tr').css('backgroundColor'));
 if (pcolor == '' || pcolor == 'transparent'){
  //this means the closet tag hasnt any bgcolor and it is white 
      $(this).css('color','white');
 }else {
  $(this).css('color',pcolor);
 }
}else{
 $(this).css('color',cvalue);
}
});

2 个答案:

答案 0 :(得分:4)

您在代码末尾缺少一个半冒号 添加它,它应该没问题 - http://jsbin.com/anuric/2/

$(document).ready(function() { var cvalue = $(".space").css("background-color"); alert(cvalue); $(".space").css("color",cvalue); });

更新

<script type="text/javascript">
    $(document).ready(function() {
        var cvalue = $(".space").css("background-color");
        alert(cvalue);
        $(".space").css("color",cvalue);    
    });
</script>

使用您的HTML更新 http://jsbin.com/asigah/

Update2 - 确保CSS中有.space background-color的CSS值,如果不存在,则cvalue无法找到.space的背景颜色。

.space { background-color: #fff; }

更新3 - 如果你只是想“隐藏”.space的内容而只是在那里有一个空的空间,那么就使用它;

$(document).ready(function() {
    $('.space').replaceWith('&nbsp;'); 
});

这里的工作样本; http://jsbin.com/asigah/3

更新4;

$(document).ready(function() {
  $('.space').each(function(index, value){
    var cvalue = ($(this).closest('div, p, tr').css('background-color'));
    //alert(cvalue);
    $(this).css('color',cvalue);
  });
});

这将找到最接近的元素(div,p或tr)标签,并将.space的颜色设置为与其找到的元素的背景颜色相同。 我想这就是你想要的。

预览 - http://jsbin.com/asigah/28

答案 1 :(得分:0)

如果您使用 {{1> .space 添加背景颜色,此代码将有效}}

css

注意:

代码有效。但它为$(document).ready(function() { var cvalue = $(".space").css("backgroundColor"); $(".space").css("color",cvalue); }); 添加了transparent颜色,因为.space .space没有定义任何背景。因此,您需要将css颜色添加到backgound

此代码适用于您当前的HTML和CSS结构,不做任何更改:

.space

我添加了另一个代码段:

$(document).ready(function() {
    $('.space').each(function(index, value){
      var cvalue = $(this).parents().find('tr').css('backgroundColor');
      $(this).css('color', cvalue);
    });
});