Question

我正在尝试将值从一个函数发送到另一个函数。但是当我试图在控制台中显示它时，它表示未定义。在此处，我尝试在有人点击large-image2功能时显示Big() ID。使用large-image id中的相同图片。当有人点击lgBox()功能时会发生哪一个。

任何人请帮助

function lgBox(url){
    var u = url;
    big(u);
    document.getElementById("large-image").innerHTML="<img src='" + u + "' />";
}

这是我的另一个功能。我从上面的函数发送数据。

function big(u) {
    var ul=u;
    alert(ul);
    document.getElementById("large-image2").innerHTML="<img src='" + ul + "' />";}

这里大函数说未定义，而我试图显示ul的值。提前谢谢。

这是我的HTML代码。

<div id="large-image" onclick="big()">
</div>
<div id="large-image2" onclick="lgBoxcross()">
</div>
<div id="thumb-image" >
    <button onclick="lgBox('../images/<?php echo  $singleProductImage['name']; ?>')">
        <img src="../images/<?php echo $singleProductImage['name']; ?>" alt="" class="img">
    </button>
</div>

我不是在这里提供我的PHP代码。

Answer 1

点击按钮，它完全正常。但是，如果您点击large-image，它会显示undefined，因为您还没有通过big()中的任何内容：

＆＃13;

function lgBox(url) {
  document.getElementById("large-image").innerHTML = '<img src="' + url + '"/>';
}


function big(elem) {
  var myimg = elem.getElementsByTagName('img')[0];
  var mysrc = myimg.src;
  document.getElementById("large-image2").innerHTML = '<img src="' + mysrc + '"/>';
}

＆＃13;

<div id="large-image" onclick="big(this)">
</div>
<div id="large-image2">
</div>
<div id="thumb-image">
  <button onclick="lgBox('http://via.placeholder.com/350x150')">
        button
    </button>
</div>

＆＃13;

Answer 2

在函数之间共享值的一种简单方法是将函数和变量放在事件处理程序中。阅读更新后，它变得更加令人困惑......我没有看到lgBoxcross()。不是将所有这些功能都关闭，而是制作一个功能。

在此演示中：

所有点击只有一个回调函数。
它被绑定到一个按钮，当单击该按钮时，它将提取驻留在此按钮内的img（img的url）的src值。
然后调用另一个函数lgBox()并通过它传递url。
lgBox()获取此网址并在每个div中创建一个图片。
每个div都有on on事件处理程序，当单击时将触发主缩略图按钮并发生相同的结果（两个div都获取img）。

演示

var btn = document.getElementById('btn');

btn.onclick = function() {
  var url = this.querySelector('.img').src;
  lgBox.call(this, url);
};

function lgBox(u) {
  var img = "<img src='" + u + "' width='200'style='object-fit:contain'>";
  document.getElementById("large-image1").innerHTML = img;
  document.getElementById("large-image2").innerHTML = img;
}

.frame {
  width: 30vw;
  height: 30vh;
  border: 1px solid red;
  display: inline-block;
}

<div id="large-image1" class='frame' onclick="btn.click()">
</div>
<div id="large-image2" class='frame' onclick="btn.click()">
</div>
<div id="thumb-image">
  <button id='btn'>
        <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width='50' class="img">
    </button>
</div>

将参数从一个函数发送到另一个函数

2 个答案:

演示