Jquery. Nu funcționează

Încerc să evidențiez un rând de masă folosind metoda .hover() a lui Jquery.

Am următorul cod:

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;
    }
}

selectată este definită în css-ul pe care l-am inclus în index.php.

Acesta este index.php meu

<?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");
?>




    <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">               
                    
Vandaag <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>
 
                </div>
                <div id="stats">                
                    
Turfjesteller <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>
 
                </div>
            </div>
            <div id="actie">
                <div id="nieuw">
                    
Nieuwe turfjes
<input type="text" name="redennieuw" id="redennieuw"/>
<input type="text" name="door" id="door" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>>
<div id = "buttonz"><button type="button" id="submitnieuw">Turfje uitdelen</button></div>
 
                </div>
                <div id="verwijder">
                    
Verwijderen turfjes
<input type="text" name="door" id="door2" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>>
<div id = "buttonz"><button type="button" id="submitdelete">Turfje verwijderen</button></div>
 
                </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>

Alerta de test nu este executată, așa că știu că mișcarea mea nu funcționează. Am verificat si totul inainte de a se executa cu toate acestea si inca functional.

Nu sunt foarte sigur ce fac gresit. Poate cineva să mă ajute, te rog?

Sintaxa mea pare a fi bine, potrivit damelor online.

0
Vă mulțumim că ați postat codul, dar poate că ar trebui să puneți o copie a paginii finale redate într-o vioară, astfel încât să putem juca cu ea.
adăugat autor Robert Harvey, sursa

2 răspunsuri

Nu există un cod de addClassName în jQuery, vrei să spui addClass ?

Incearca asta:

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

Also, your selector could be "simplified" to $("tr:not:(first)")

2
adăugat
Vă mulțumim mult pentru răspunsul dvs. rapid și precis!
adăugat autor user1390504, sursa

Se pare (nu este sigur din cauza codului tău fiind php) că vrei să aplici hover pe elementele care nu sunt prezente la încărcare. În acest caz, nu puteți face pur și simplu

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

Trebuie să utilizați jQuery pe , astfel încât acesta să fie aplicat tuturor elementelor care apar.

Pentru a înlocui un hover de către o pe, trebuie să cârlig evenimentele "mousenter" și "mouseleave":

$('body').on('mousenter', 'tr:not(:first)', function({ ... });
$('body').on('mouseleave', 'tr:not(:first)', function({ ... });
1
adăugat
Vă mulțumim mult pentru răspunsul dvs. rapid și precis!
adăugat autor user1390504, sursa
$ ("stats") pe ("mouseenter", "tr", funcția() {$ (this) .addClass ("selectat"); $ ("stats") pe ("mouseleave", "tr", funcția() {$ (aceasta) .removeClass ("selectat"); Este ceea ce am acum. Codul ulterior este executat acum, totuși: clasa nu este adăugată și când o înlocuiesc cu alerte, ele nu sunt executate nici ..
adăugat autor user1390504, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com

PHP România, Moldova
PHP România, Moldova
173 participanți

Vorbim despre Yii, Laravel, Symphony, MySQL, PgSQL, WP, OpenCart... Pentru confort, opriți notificările. Parteneri: https://ciupacabra.com @js_ro @node_ro @python_ro @seo_ro @Romania_Bot Offtop: @holywars_ro Joburi: @php_job @Grupuri_IT