将图像添加到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>

感谢和问候，

来源

2013-05-02 anam

检查你的''，输入错误！和'（'$ this'）。addClass（'t1'）'better'$（this）.addClass（'t1'）' – 2013-05-02 06:44:29

如果我把它很好，你需要这样的东西

$(document).ready(function() { 
    $("img").click(function() { 
     var t = $(this); 
     t.prevAll().removeClass('lower').addClass('upper'); 
     t.nextAll().removeClass('upper').addClass('lower'); 
    }) 
})

来源

2013-05-02 06:50:01 indriq

+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'); 
      } 
     }); 
    }); 
});

设我知道这是否适合你

来源

2013-05-02 06:38:01

您可以通过使用children函数在父div（命名为mImageFlow）中循环来完成此操作。如何做到这一点，因为你可以采取以下代码的帮助。

$(document).ready(function() { 
    $("div[id$='myImageFlow']").children().each(function(){ 
     if($(this).attr('alt') > selectedImage) 
     { 
      $(this).addClass('t1'); 
     }else{ 
      $(this).addClass('t2'); 
     } 
    }); 
});

来源

2013-05-02 06:54:00 Prashant

将图像添加到div动态

回答

相关问题