将图像添加到div动态
我有页上的图像,点击图像我想检查它的ALT值,然后相应地添加到类。例如,如果我点击其alt值为4的图像,那么1,2,3图像应该放在上层,而5,7,8应该放在下层。将图像添加到div动态
如何实现这个..
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ImageFlow</title>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- This includes the ImageFlow CSS and JavaScript -->
<link rel="stylesheet" href="imageflow.packedfunct2.css" type="text/css" />
<script type="text/javascript" src="imageflow.packed.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img").click(function(){
var pos=$('img', this).attr('alt');
alert('i am imageFlip'+this.alt);
console.log('i am Image Flip');
('$this').addClass('t1');
});
});
</script>
</head>
<body style="background-image:url('img2/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
<h1>Sample For Image Slider</h1>
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<img src="img2/thumb1.jpg" longdesc="" width="300" height="360" alt="1" />
<img src="img2/thumb2.jpg" longdesc="" width="300" height="360" alt="2" />
<img src="img2/thumb3.jpg" longdesc="" width="300" height="360" alt="3" />
<img src="img2/thumb4.jpg" longdesc="" width="300" height="360" alt="4" />
<img src="img2/thumb5.jpg" longdesc="" width="300" height="360" alt="5" />
<img src="img2/thumb6.jpg" longdesc="" width="300" height="360" alt="6" />
<img src="img2/thumb7.jpg" longdesc="" width="300" height="360" alt="7" />
<img src="img2/thumb8.jpg" longdesc="" width="300" height="360" alt="8" />
<img src="img2/thumb9.jpg" longdesc="" width="300" height="360" alt="9" />
<img src="img2/thumb10.jpg" longdesc="" width="300" height="360" alt="10" />
<img src="img2/thumb11.jpg" longdesc="" width="300" height="360" alt="11" />
<img src="img2/thumb1.jpg" longdesc="" width="300" height="360" alt="12" />
<img src="img2/thumb2.jpg" longdesc="" width="300" height="360" alt="13" />
<img src="img2/thumb3.jpg" longdesc="" width="300" height="360" alt="14" />
<img src="img2/thumb4.jpg" longdesc="" width="300" height="360" alt="15" />
</div>
</body>
感谢和问候,
如果我把它很好,你需要这样的东西
$(document).ready(function() {
$("img").click(function() {
var t = $(this);
t.prevAll().removeClass('lower').addClass('upper');
t.nextAll().removeClass('upper').addClass('lower');
})
})
+1,但是请记住,您还需要删除预先存在的类添加它们:'t.siblings()。removeClass('upper lower');' – 2013-05-02 06:57:14
true。如果我想添加'upper',我不需要删除它,它不会是class =“upper upper”。 – indriq 2013-05-02 07:06:11
波纹管代码会得到你想要的东西,根据我理解您的问题
$(document).ready(function() {
$("#myImageFlow img").click(function(){
var clickedImg = $(this).attr('alt');
$("#myImageFlow img").each(function(){
if($(this).attr('alt') > clickedImg)
{
$(this).addClass('t1');
}else{
$(this).addClass('t2');
}
});
});
});
设我知道这是否适合你
您可以通过使用children函数在父div(命名为mImageFlow)中循环来完成此操作。如何做到这一点,因为你可以采取以下代码的帮助。
$(document).ready(function() {
$("div[id$='myImageFlow']").children().each(function(){
if($(this).attr('alt') > selectedImage)
{
$(this).addClass('t1');
}else{
$(this).addClass('t2');
}
});
});
检查你的'
',输入错误!和'('$ this')。addClass('t1')'better'$(this).addClass('t1')' – 2013-05-02 06:44:29