获取IMG SRC ONCLICK，然后将其馈入其他功能

我正在尝试设置画廊，单击较小的图像后，它将显示一个带有较大尺寸的隐藏div，并单击该图像。

我想知道您如何设置一个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: hidden转到visibility: visible。

下一个需要运行的脚本是在可见.clickeddiv并单击时，它返回到隐藏。

我大多在找出第一个脚本时遇到了困难。

.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>

它非常简单，代码解释了自己

$(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>

您可以做这样的事情，

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;
}

请尝试此代码。我认为这会帮助您。

<!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中实现相同的功能要好得多。

$(document).ready(function() {
    $("#open_page").click(function(){
        var go_to_url = $("#redirect").find(":selected").val();
        document.location.href = go_to_url;
    });
});

您可以做这样的事情

相关内容

最新更新

热门标签：