jquery - 内联 JavaScript 不起作用

Question

这个脚本有问题吗？似乎不起作用。如果它有效，有人可以在你这边尝试吗？它使用小提琴工作，但当我在本地运行时它不起作用。

<HTML>

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

document.ready(function(){
var widthval = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);
alert(widthval);
$hr.width(widthval);

if (widthval > 90) {
    $hr.css('background-color', 'red');}

});

</script>

</HEAD>

<BODY BGCOLOR="#EFEFFF">


<TABLE id="table_id" BORDER="1" CELLPADDING="2" CELLSPACING="2">
<TR>
 <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
</TR>
<TR>
 <TH>Server</TH>
 <TH>Drive</TH>
 <TH>Percent Free Space</TH>
 <TH>Size Free Space</TH>
 <TH>Status</TH>
</TR>


<TR>
 <TD>%server%</TD>
 <TD>%drive%</TD>
 <TD class="item">50%</TD>
 <TD>%fspace%</TD>
 <TD width=200 style="border: 2px solid silver;padding:none">
 <hr style="color:#c00;background-color:blue;height:15px; border:none; margin:0;" align="left"/> </TD>
</TR>
<TR>

</TABLE>

</BODY>
</HTML>

这是我想要完成的 jsfiddle 链接。
http://jsfiddle.net/XhxkX/7/

score 2 · Accepted Answer

Your code isn't working because you're mixing regular JavaScript DOM methods with jQuery.

This should work a little better:

var width = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);

$hr.width(width);

if (width > 90) {
    $hr.css('background-color', 'red');
}

Demo: http://jsfiddle.net/XhxkX/10/

Also, there are a few invalid tags in your HTML (<LPFOOTER> and <LPHEADER>). I'm not sure what they're for, but they are both improperly placed and one of them is missing an opening tag. I suggest you update your HTML to current standards before working much more with it.

score 0 · Accepted Answer

0

于 2012-10-06T07:26:03.130 回答

score 0 · Accepted Answer

Try this:

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var widthValue = document.getElementsByClassName("item")[0].innerText;
document.getElementsByTagName("hr")[0].style.width = widthValue;

if (parseInt(widthValue, 10) > 90) {
    document.getElementsByTagName("hr")[0].style.backgroundColor = "red";
}

});
</script>
</HEAD>

score 0 · Accepted Answer

The problem is that you are mixing javascript and jquery

use this

 $(document).ready(function(){
var widthValue = $(".item").text();
$("hr").css("width",widthValue)
if (parseInt(widthValue, 10) > 90) {
   $("hr").css("backgroundColor","red");
}

});

score 0 · Accepted Answer

that should work I used to different approaches to show how you can access and manipulative the DOM elements. I hope that helps.

   <script type="text/javascript">

$(document).ready(function(){
var widthValue = parseInt($('.item').eq(0).text());
$('hr').eq(0).css('width',widthValue) ;

if (parseInt((widthValue.replace('%','')/10)* 10) > 90) {
   $('hr').eq(0).css({'background-color':'red'});
}

});

score 0 · Accepted Answer

I finally got it! Thanks to an old friend who walked me through it.. here's the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Critical Server Disk Space</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $('.bar').each(function(i){

                    var width = parseInt($('.item').eq(i).text(), 10);
                    var hr = $(this).eq(i);

                    $(this).width(width);

                    if(width >= 90){
                        $(this).css('background-color', 'red');
                    }
                });

            });

            //window.onload = init();
        </script>
        <style type="text/css">
            hr{
                border:none;
                background:blue;
                height:15px;
                margin:0px;     
                text-align:left;
            }
            .border{border:1px solid #CCC; padding:0px; width:100px;background:#FFF;}
        </style>
    </head>
    <BODY BGCOLOR="#EFEFFF" >
        <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2">
            <TR>
             <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
            </TR>
            <TR>
             <TH>Server</TH>
             <TH>Drive</TH>
             <TH>Percent Free Space</TH>
             <TH>Size Free Space</TH>
             <TH>Status</TH>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">50 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">30 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">95 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">80 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>
</html>

jquery - 内联 JavaScript 不起作用

6 回答 6

Related

Reference