Question

我试图设置一个图库，在点击较小的图片时，它会显示一个隐藏的div，其大小与点击的特定图像相同。

我想知道你如何设置一个Jquery，点击一个div后，它会将img src转换为另一个img标记（带有变量或其他）。

我正在玩像

这样的东西

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

然后我会将其添加到另一个函数中，其中x将是img src函数中的getImageSrc，但我无法完全绕过它。我似乎无法想到如何在第一个函数中触发onClick事件而不在第一个函数内部引入其他函数。

任何帮助都会很棒。如果这种方法不起作用（除了插件），我甚至会采取全新的方向。

以下是我现在有时间了解它的代码段。我基本上试图在点击图片时将图片src传递到.clicked，.clicked将从visibility: hidden转到visibility: visible。

需要运行的下一个脚本是当.clicked div可见并单击时，它会返回隐藏状态。

我很难搞清楚第一个脚本。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

非常简单，Code解释自己

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以这样做，

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

Answer 3

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

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

你可以做这样的事情

Answer 4

请尝试此代码。我想这会对你有帮助。

＆＃13;

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

＆＃13;

我对您的getImageSrc方法做了一些小修改。我认为在jQuery中实现相同的功能要好得多。

获取img src onclick然后将其提供给其他函数

4 个答案: