JQuery效果不起作用

时间:2013-01-17 09:13:15

标签: jquery jquery-selectors

我想为列表中的图片按钮添加fadein和fadeout效果。每次我的鼠标都在当前标记div 标记div 上> 2个按钮应该淡出,当我离开时它们应该淡出。我为第一个标签div 编写了JQuery效果。如何让它适用于所有图像?我使用php 5.5和heidsql。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
session_start(); 
if(!isset($_SESSION['name']))
{
    die("To access this page, you need to <a href='index.php'>LOGIN</a>"); 
} 
 else  
    {  
    include('../conect.php');


                    error_reporting (E_ALL ^ E_NOTICE);
                    $allowedExts = array("jpg", "jpeg", "gif", "png");
                    $parts = explode('.', $_FILES["file"]["name"]);
                    $extension = end($parts);   
                    if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/png")|| ($_FILES["file"]["type"] == "image/pjpeg"))&& ($_FILES["file"]["size"] < 1000000)&& in_array($extension, $allowedExts)){



                                if ($_FILES["file"]["error"] > 0){
                                    $mesaj= "Return Code: " . $_FILES["file"]["error"] . "<br />";
                                }

                                $nume= $_FILES["file"]["name"];

                                if (file_exists("../admin/upload/" . $_FILES["file"]["name"])){
                                    $mesaj= $_FILES["file"]["name"] . " already exists. ";

                                }

                                else{ 
                                      move_uploaded_file($_FILES["file"]["tmp_name"],
                                      "../admin/upload/" . $_FILES["file"]["name"]);
                                      $mesaj= "Stored in: " . "admin/upload/" . $_FILES["file"]["name"];

                                      mysql_query("INSERT INTO imagini (nume) VALUES ('$nume')"); 

                                    } 

                        } 



    }

 ?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lista imagini</title>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" /> 
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Economica&subset=latin,latin-ext'type='text/css'>
<link rel="stylesheet" href="/css/megamenu.css"type="text/css" />
<link rel="stylesheet" href="/css/admin_tools.css" type="text/css" />



<script type="text/javascript" src="/javascript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="/javascript/lightbox.js"></script>
<script type="text/javascript" src="/javascript/megamenu.js"> </script>
<script type="text/javascript" >

//initializare megamenu
    ddmegamenu.docinit({
        menuid:'solidmenu',
        dur:200 
    })
//initializare lightbox
jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })


      $("#tag1").mouseenter(function(){  //add the fadein effect for the buttons of the first picture
            $("#Btag1").fadeIn();

        });
     $("#tag1").mouseleave(function(){  //add the fadeOut effect for the buttons of the first picture
            $("#Btag1").fadeOut();  
        });


  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })(); 




</script>
 </head>
 <body id="lista_imagini">
 <?php include('menu_admin_panel.php') ?>
<div id="lista_imagini_content">

        <div id="imagine">
            <form action="<?php $_PHP_SELF ?>" method="post" enctype="multipart/form-data">
            <label for="file">Poza</label><input type="file" name="file" /> 
            <input type="submit" value="Adauga imagine" class="buton_imagine" onchange="call" />
            </form>
        </div>      

        <div id="mesaj_eroare">
                <span>Lista Imagini</span>
        </div>

        <div class="imageRow">
            <div class="set">

                 <?php 
                    $result=mysql_query("SELECT * FROM imagini");
                    $result2=mysql_num_rows($result);
                    $i=1;
                    while($data=mysql_fetch_row($result)){ ?>
                                    <div id=<?php echo'"tag'.$i.'" '; ?> style="z-index:500;background-color:green;">
                                            <div class="single">


                                                    <a href="../admin/upload/<?php echo $data[1];?>"  rel="lightbox[plants]">  <img src= "../admin/upload/<?php echo $data[1];?>"   /></a>

                                                        <div id=<?php echo'"Btag'.$i.'" ';$i++; ?> style="display:none;">
                                                            <div id="buton_slide" >
                                                                <a href="delete.php?id_imagini=<?php echo $data[0];?>&nume_imagini=<?php echo $data[1]?>" class="buton">Sterge</a></td>
                                                            </div>

                                                            <div id="buton_slide2" >
                                                                <a href="imagine_noua.php?id_imagini=<?php echo $data[0];?>" class="buton">Editare</a></td>
                                                            </div>                              

                                                        </div>
                                            </div>      

                                    </div>

            <?php   } ?>          

            </div>
        </div>
</div>







 <?php mysql_close($con);?>
 </body>
 </html>

3 个答案:

答案 0 :(得分:1)

尝试使用类而不是ID。 示例代码如下。

$(".tagDiv").mouseenter(function(){  //add the fadein effect for the buttons of the first picture
            $(this).find(".BtagBtns").fadeIn();

        });


<div class="imageRow">
    <div class="set">

         <?php 
            $result=mysql_query("SELECT * FROM imagini");
            $result2=mysql_num_rows($result);
            $i=1;
            while($data=mysql_fetch_row($result)){ ?>
                            <div class="tagDiv" id=<?php echo'"tag'.$i.'" '; ?> style="z-index:500;background-color:green;">
                                    <div class="single">


                                            <a href="../admin/upload/<?php echo $data[1];?>"  rel="lightbox[plants]">  <img src= "../admin/upload/<?php echo $data[1];?>"   /></a>

                                                <div class="BtagBtns" id=<?php echo'"Btag'.$i.'" ';$i++; ?> style="display:none;">
                                                    <div id="buton_slide" >
                                                        <a href="delete.php?id_imagini=<?php echo $data[0];?>&nume_imagini=<?php echo $data[1]?>" class="buton">Sterge</a></td>
                                                    </div>

                                                    <div id="buton_slide2" >
                                                        <a href="imagine_noua.php?id_imagini=<?php echo $data[0];?>" class="buton">Editare</a></td>
                                                    </div>                              

                                                </div>
                                    </div>      

                            </div>

    <?php   } ?>          

    </div>
</div>

答案 1 :(得分:0)

我没有检查你的整个代码,只是复制了js并做了一个非常简单的例子,它运行正常。 你可以在这里看到它: http://jsfiddle.net/RqKkz/

$(document).ready(function(){

  $("#hoverme").mouseenter(function(){  //add the fadein effect for the buttons of the first picture
    $(".button").fadeIn();
  });
  $("#hoverme").mouseleave(function(){  //add the fadeOut effect for the buttons of the first picture
    $(".button").fadeOut();  
  });
});

正常工作..如果你想做类似的事情你可以给图像一个类而不是一个ID,使它适用于所有这些。

答案 2 :(得分:-1)

我面临同样的问题,但在我改变时解决了

$(function() {})

jQuery(document).ready(function($) {})