0

Jquery の .hover() メソッドを使用してテーブルの行を強調表示しようとしています。

次のコードがあります。

var x;
var namen;
window.onload = function(){
    x = true;
    y = true;
    $("submitnieuw").observe('click', addturf);
    $("submitdelete").observe('click', verwijderturf);
    $("stats").on("click", "tr", select);
    setInterval(function (){
        jQuery("#recent").load("vandaag.php");
        if(x){
            jQuery("#stats").load("stats.php");
        }
    }, 10000);
    $("tr").not(':first').hover(
        function () {
            $(this).addClassName("selected");
        }, 
        function () {
            $(this).removeClassName("selected");
        }
    );
    alert("test");
};

function select(naam){
    //highlight the selected list element
    if (y){
        var name = naam.findElement('tr').id;
        if (name !== ""){
            x = false;
            y = false;
            jQuery.ajax('details.php',{
                data: {
                    'Naam': name,
                    'door': $("door2").value
                },
                type: 'post', 
                success: function(data){
                    $("stats").innerHTML = data;
                },
                error: ajaxFailure
            });
        }
    }
    else{
        x = true;
        y = true;
        jQuery("#stats").load("stats.php");
        jQuery("#recent").load("vandaag.php");  
    }
}

function verwijderturf() {
    var box = document.getElementById("naamverwijder");
    var naam = box.options[box.selectedIndex].value;
    document.getElementById("naamnieuw").selectedIndex=0;
    $("redennieuw").value = "";
    jQuery.ajax('server.php',{
        data: {
            'mode': 'verwijderturf',
            'naam': naam,
            'door': $("door2").value
        },
        type: 'post', 
        success: update,
        error: ajaxFailure
    });
}


function addturf() {
    var box = document.getElementById("naamnieuw");
    var naam = box.options[box.selectedIndex].value;
    document.getElementById("naamnieuw").selectedIndex=0;
    var reden = $("redennieuw").value;
    $("redennieuw").value = "";
    jQuery.ajax('server.php',{
        data: {
            'mode': 'addturf',
            'naam': naam,
            'door': $("door2").value,
            'reden': reden
        },
        type: 'post', 
        success: update,
        error: ajaxFailure
    });
}

function update(ajax){
    jQuery("#stats").load("stats.php");
    jQuery("#recent").load("vandaag.php");
}


function ajaxFailure(ajax, exception) {
    alert("Error making Ajax request:" + 
        "\n\nServer status:\n" + ajax.status + " " + ajax.statusText + 
        "\n\nServer response text:\n" + ajax.responseText);
    if (exception) {
        throw exception;
    }
}

selected は、index.php に含めた css で定義されています。

これは私のindex.phpです

<?php
    include_once("db.php"); 
    session_start();
    if (!isset($_SESSION['uid'])){ 
        header("location:main_login.php");
        exit();
    }
    if (!isset($_SESSION['upass'])){ 
        header("location:main_login.php");
        exit();
    }
    $sql="SELECT * FROM users WHERE Naam='".$_SESSION['uid']."' AND Wachtwoord='".$_SESSION['upass']."'";
    $result=mysql_query($sql);
    $count=mysql_num_rows($result);
    if($count < 1){
        header("location:main_login.php");
        exit();
    }

?>


<?php
    $date = date("y-m-d");
    $vandaag = mysql_query("SELECT Type, Naam, Reden, Door FROM turfjes WHERE turfjes.Datum = '" . $date . "'");
    $names = mysql_query("SELECT Naam From users");
    $names2 = mysql_query("SELECT Naam From users");
    $names3 = mysql_query("SELECT Naam From users");
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tomaten turfjes pagina | 258</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> 
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            jQuery.noConflict();
        </script>
        <script src="js/prototype.js" type="text/javascript"> </script>
        <script src="js/scriptaculous.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"> </script>
    </head>

    <body>
        <div id="container">
            <div id="header">
            </div>
            <div id="info">
                <div id="recent">               
                    <fieldset>
                        <legend>Vandaag</legend>
                        <table border="0">
                            <tr>
                            <td>Type</td>
                            <td>Naam</td>
                            <td>Reden</td>
                            <td>Door</td>
                            <?php
                                while($a = mysql_fetch_array($vandaag)){
                            ?>      <tr>
                                    <td><?php echo($a['Type']);?></td>
                                    <td><?php echo($a['Naam']);?></td>
                                    <td><?php echo($a['Reden']);?></td>
                                    <td><?php echo($a['Door']);?></td>
                                    </tr>
                            <?php
                                } 
                            ?>
                        </table>
                    </fieldset>
                </div>
                <div id="stats">                
                    <fieldset>
                        <legend>Turfjesteller</legend>
                        <table border="0">
                            <tr>
                            <td>Naam</td>
                            <td>Aantal</td>
                            <td>Gedaan</td>
                            <td>Resterend</td>
                            </tr>
                            <?php
                                while($r = mysql_fetch_array($names)){
                                echo("<tr id=".$r['Naam'].">");
                            ?>
                                    <td><?php echo($r['Naam']);?></td>
                            <?php 
                                        $sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
                                        $result=mysql_query($sql);
                                        $count=mysql_num_rows($result); //count = adtjes
                                        $sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
                                        $result2=mysql_query($sql2);
                                        $count2=mysql_num_rows($result2); //count2 = turfje     
                            ?>
                                    <td><?php echo($count2);?></td>
                                    <td><?php echo($count);?></td>
                                    <td><?php echo($count2-$count);?></td>
                                    </tr>
                            <?php 
                                }
                            ?>
                        </table>
                    </fieldset>
                </div>
            </div>
            <div id="actie">
                <div id="nieuw">
                    <fieldset>
                    <legend>Nieuwe turfjes</legend>
                        <label>Naam</label>
                        <select id = "naamnieuw">
                            <option value="" selected></option> 
                            <?php
                                while($r = mysql_fetch_array($names2)){
                                    echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
                                }
                            ?>
                        </select>
                        <br>
                        <label>Reden</label> <input type="text" name="redennieuw" id="redennieuw"/>  <br>
                        <label>Door</label> <input type="text" name="door" id="door" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
                        <div id = "buttonz"><button type="button" id="submitnieuw">Turfje uitdelen</button></div>
                    </fieldset>
                </div>
                <div id="verwijder">
                    <fieldset>
                    <legend>Verwijderen turfjes</legend>
                        <label>Naam</label>                     
                        <select id = "naamverwijder">
                            <option value="" selected></option> 
                            <?php
                                while($r = mysql_fetch_array($names3)){
                                    echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
                                }
                            ?>
                        </select>
                        <br>
                        <label>Door</label> <input type="text" name="door" id="door2" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
                        <div id = "buttonz"><button type="button" id="submitdelete">Turfje verwijderen</button></div>
                    </fieldset>
                </div>
                <form name="logout" method="post" action="logout.php">
                <div id = "buttonz"><input type="submit" name="logout" value="Log uit"></div>
                </form>
            </div>
        </div>
    </body>
</html>

テスト アラートが実行されないため、ホバーが機能していないことがわかります。ホバーが実行される前のすべてをチェックしましたが、まだ機能しています。

何が間違っているのかよくわかりません。誰でも私を助けてもらえますか？

オンラインチェッカーによると、私の構文は問題ないようです。

4

2 に答える 2

2

addClassNamejQueryのようなものはありませaddClassん。

これを試して：

$("tr").not(':first').hover(
    function () {
        $(this).addClass("selected");
    }, 
    function () {
        $(this).removeClass("selected");
    }
);

また、セレクターを「単純化」することもできます$("tr:not:(first)")

于 2012-05-29T17:56:55.380 に答える
1

ロード時に存在しない要素にホバーを適用したいようです（コードがphpであるため、わかりません）。その場合、単純に行うことはできません

$("tr").not(':first').hover(

表示されるすべての要素に適用されるように、 jquery onを使用する必要があります。

ホバーをオンに置き換えるには、'mousenter' および 'mouseleave' イベントをフックする必要があります。

$('body').on('mousenter', 'tr:not(:first)', function({ ... });
$('body').on('mouseleave', 'tr:not(:first)', function({ ... });
于 2012-05-29T17:58:04.870 に答える