將圖像添加到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動態

回答

相關問題