獲取IMG SRC onclick然後將其饋送到其他功能

我想要設置一個畫廊，點擊一個較小的圖像時，它會顯示一個隱藏的大小與被點擊的特定圖像的div。獲取IMG SRC onclick然後將其饋送到其他功能

我想知道如何設置一個jquery，點擊一個div後，它將img src加入另一個img標籤（帶有變量或其他）。

我的東西打周圍像

function getImageSrc(x) { 
    var x= document.getElementsByClassName("image").src, 
    return x;

其中我會再送入另一個函數，其中x會從getImageSrc功能img src，但我不能完全換我的頭周圍。我似乎無法想象如何在第一個函數中觸發onClick事件，而不會在第一個函數中引入額外的函數。

任何幫助將是偉大的。如果這種方法無效（除了插件），我甚至會採取一個全新的方向。

下面是我有時間瞭解的代碼片段。我基本上試圖將圖像src傳遞到.clicked當圖像被點擊，其中.clicked將從visibility: hiddenvisibility: visible去。

需要運行的下一個腳本是當.clicked div可見並單擊時，它會回到隱藏狀態。

我很難搞清楚第一個腳本。

.clicked { 
 
    visibility: hidden; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(35,35,41,.9); 
 
    z-index: 100; 
 
    top:0; 
 
    } 
 

 
.imgcontainer { 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
    }

<div class="clicked"> 
 
    <img class="clickedimg" src=""> 
 
</div> 
 

 
<div class="imgcontainer"> 
 
    <img class="image" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg"> 
 
</div>

來源

2016-11-22 Jake Starkey

發佈HTML結構 –

你可以顯示你正在處理的代碼片段嗎？ –

向我們展示您的標記配對 –

你可以做這樣的事情，

function getImageSrc(x){ 
    var x= document.getElementsByClassName("image").src; 
    //Call the function to append the img src to the new element 
    appendImageSrc(x); 
} 

function appendImageSrc(imageSrc){ 
    //append the src to the new Element 
    document.getElementsByClassName("imageLarger").src = imageSrc; 
}

來源

2016-11-22 05:26:23 GraveyardQueen

它很簡單，代碼解釋本身

$(document).ready(function() { 
 
    $('.small > img').click(function() { 
 
    $('.big > img').prop('src', $(this).prop('src')); 
 
    $('.big').show(); 
 
    }) 
 
});

.small { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.small >img, 
 
.big > img { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.big { 
 
    height: 300px; 
 
    width: 300px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="small"> 
 
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" /> 
 
</div> 
 
<div class="big"> 
 
    <img /> 
 
</div>

來源

2016-11-22 05:29:25

我認爲這可以通過簡單地切換腳本中的一些調用來工作，但不幸的是，它在單擊圖像時似乎沒有做任何事情。 –

$(document).ready(function() { 
    $("#open_page").click(function(){ 

     var go_to_url = $("#redirect").find(":selected").val(); 
     document.location.href = go_to_url; 
    }); 
});

你可以做這樣的事情

來源

2016-11-22 05:38:04

請試試這個代碼。我認爲這會幫助你。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function() { 
 
      document.getElementById("SmallerImageURL").src = "https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg"; 
 
     }); 
 

 
     function EnlargeImage() { 
 
      var SmallImg = getImageSrc("SmallerImageURL"); 
 
      document.getElementById("EnlargedImageURL").src = SmallImg; 
 
     } 
 

 
     function getImageSrc(ImageClass) { 
 
      var x = $("."+ImageClass).attr("src"); 
 
      return x; 
 
     } 
 
    </script> 
 
    <style> 
 
     .SmallContainer { 
 
      width: 250px; 
 
      float: left; 
 
     } 
 
     
 
     .LargeContainer { 
 
      width: 500px; 
 
      float: left; 
 
     } 
 
     
 
     .LargeContainer img, 
 
     .SmallContainer img { 
 
      float: left; 
 
      width: 100%; 
 
     } 
 
     
 
     .row { 
 
      width: 100%; 
 
      float: left; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="SmallContainer"> 
 
     <img id="SmallerImageURL" class="SmallerImageURL"/> 
 
    </div> 
 
    <div class="LargeContainer"> 
 
     <img id="EnlargedImageURL" /> 
 
    </div> 
 
    <div class="row"> 
 
     <button onclick="EnlargeImage()">Enlarge Me</button> 
 
    </div> 
 
</body> 
 

 
</html>

我已經做了小的修改，以你的getImageSrc方法。我認爲在jQuery中實現相同效果要好得多。

來源

2016-11-22 05:39:54 Nitheesh

獲取IMG SRC onclick然後將其饋送到其他功能

回答

相關問題