IE中的jQuery问题

Question

我的简单 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);
}
});

Answer 1

您的代码末尾缺少一个分号 添加它应该没问题 - 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 值，如果 .space 不存在，则 cvalue 无法找到 .space 的背景色。

.space { background-color: #fff; }

更新 3 - 如果您只是想“隐藏” .space 的内容并在那里只有一个空白空间，请使用它；

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

这里的工作示例； 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

Answer 2

如果您将背景颜色添加到 .space，此代码将起作用使用 css p>

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

注意：

代码有效。但它为.space 添加了transparent 颜色，因为.space 在css 中没有定义背景。所以你需要将backgound颜色添加到.space。

此代码适用于您当前的 HTML 和 CSS 结构，没有任何变化：

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

我又添加了一个代码 sn-p：

$(document).ready(function() {
    $('.space').each(function(index, value) {
        var that = this;
        $(this).parents().each(function() {
            var cvalue = $(this).css('backgroundColor');
            if (cvalue != '' && cvalue != 'transparent') {
                $(that).css('color', cvalue);
            }
        });
    });
});