通過單擊圖像將圖像ID傳遞給JQuery

我使用JQuery爲圖像設置動畫。我正在使用一個按鈕來激活動畫。通過單擊圖像將圖像ID傳遞給JQuery

這裏是我的代碼：

$(document).ready(function(){ 
    $("#b1").click(function(){ // b1 is the id of button 
     $(#img).animate({left: '+=20px'}); // img is the id of image 
    }); 
});

我有五個圖像，所以當我點擊另一個形象，我需要把它的ID爲$(#img)，而不是#img。所以第二張圖片將會變成動畫。

我該怎麼做？

來源

2016-06-16 Ƥŕaśađ Şŕįɱał

爲什麼不在所有的圖像上有一個類，然後在點擊任何類時使用$（this）？ – Vatsal

您可以使用data-attribute將當前選定圖像的ID存儲在按鈕中。 –

Vatsal - 你上課時意味着什麼？ –

這聽起來像你需要：

$(document).ready(function(){ 

    // declare a variable to store the selected image 
    var selected = null; 

    // listen to clicks on all your images 
    // note: might want to filter this down to your target images 
    $("img").click(function(){ 
     // save the selected image 
     selected = this 
    }); 


    $("#b1").click(function(){ 
     // animate the selected image 
     $(selected).animate({left: '+=20px'}); 
    }); 
});

我希望幫助！

來源

2016-06-16 23:41:31

其實我需要更換與認爲我已單擊 –

我明白了圖像的ID的變量中IMG $（「IMG」），但我想你錯過了這一點，這正是代碼的作用。你不需要傳遞id，「$（selected）」語句將爲你處理。 –

好吧。它的工作.....謝謝 –

，您可以給圖像的「選擇」類上點擊，然後動畫顯示選中的：

$(document).ready(function() { 

    $(".image").click(function() { 
     // unselect others 
     $(".image").removeClass("selected"); 
     // reselect this one 
     $(this).addClass("selected"); 
    }); 

    $("#b1").click(function() { 
     // animate selected 
     $(".image.selected").animate({left:'+=20px'}); 
    }); 
});

HTML

<img class='image' src="image1"/> 
<img class='image' src="image1"/> 
<button id='b1'>click</button>

這也將讓你的風格選擇的圖像，例如：

.selected { border: 1px solid pink }

來源

2016-06-16 23:46:09

這是工作正常....謝謝你 –

添加類（如img_to_animate）到相似圖片

<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png' style="width:50px;height:50px;" class="img_to_animate" /> 
<img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' style="width:50px;height:50px;" class="img_to_animate" />

的JavaScript

$(".img_to_animate").click(function(){  
    $(this).animate({left: '+=20px'}); 
})

來源

2016-06-16 23:50:44 Sami

這是按鈕，導致以前選擇的圖像動畫。沒有點擊圖片本身。 –

這也是工作....謝謝 –

很高興，如果它有幫助 – Sami

這個版本將動畫圖像移回至其原始位置時該按鈕被按下時，如果選擇了不同的圖像：

$('img').on('click', function() { 
 
    $('img').removeClass("active"); 
 
    $(this).addClass("active"); 
 
}); 
 

 
$('input[type="submit"]').on('click', function() { 
 
    if ($(this).attr('data-current-image') !== $('img.active').attr('data-image-id')) { 
 
     $('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '10'}); 
 
    } 
 
    $(this).attr('data-current-image',$('img.active').attr('data-image-id')); 
 
    $('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '+20'}); 
 
    });

img { display: block; position: relative; margin-top: 10px; left: 10px; height: 50px; width: 75px; } 
 
img.active { border-right: 3px solid #f90; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div><input type=submit data-current-image=0 value=" Animate! "> 
 
    <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=1 class="active" /> 
 
    <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=2 /> 
 
    <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=3 /> 
 
    <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=4 /> 
 
    <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=5 />

來源

2016-06-17 00:20:15

通過單擊圖像將圖像ID傳遞給JQuery

回答

相關問題