我想为列表中的图片按钮添加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>
答案 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($) {})