我如何在点击时显示图像 src

Question

编写一个函数，当您按下网站上的其中一张图片的右键时调用该函数。
函数调用了一个confirm()window，你问用户是否想知道图片的来源
如果用户点击 OK alert (this.src)，它会显示该图像的 src 属性的内容
如果用户点击取消，禁用出现在按右键

这是我的错误代码

<img src="opera1.png" id="immagine1" alt="immagine1" width="500" height="333" oncontextmenu="destra()">
<img src="ioaparatissima.JPG" id="immagine2" alt="immagine2" width="500" height="333" oncontextmenu="destra()">

javascript

function destra(){
  var r = confirm("Vuoi conoscere la src dell'immagine");

  if(r == true) {
    alert(y.src);
  } else {
  }
}

Answer 1

由于您使用的是内联事件绑定，因此我建议进行两处更改。

oncontextmenu="destra(this)"

传入内联事件绑定所在的元素。

function destra(y){
  var r = confirm("Vuoi conoscere la src dell'immagine");

  if(r == true) {
    alert(y.src);
  } else {
  }
}

接受元素作为方法参数。

Answer 2

通过重读你的陈述，在我看来这个答案更符合...... (?)

document.querySelectorAll('img').forEach(el=> el.addEventListener('contextmenu',destra) )
 
function destra(e)
  {
  e.preventDefault() // disable real context Menu

  if ( confirm("Vuoi conoscere la src dell'immagine") )
    {
    alert( this.src )
    }
  }

<img src="https://picsum.photos/150" alt="immagine1" >

<img src="https://picsum.photos/100" alt="immagine2" >

Answer 3

使用 getElementById()，如本例所示：

function destra() {
    let r = confirm("Vuoi conoscere la src dell'immagine?");
    let y = document.getElementById("immagine1");
    if (r == true) {
        alert(y.src);
    }
}

Answer 4

试试这个...我希望这个有用...

<img src="opera1.png" id="img1" alt="immagine1" width="500" height="333">
<button onclick="getimgId(1)">copy link</button>
<br/>
<img src="ioaparatissima.JPG" id="img2" alt="immagine2" width="500" height="333">
<button onclick="getimgId(2)">copy link</button>

<script type="text/javascript">
    function getimgId(img_id){
        var res = confirm("Vuoi conoscere la src dell'immagine");

        if(res == true) {
            var img_id = img_id;
            var img_url = document.getElementById('img'+img_id).src;
            alert(img_url);
        } else {

        }
    }
</script>

现在你只想给图片赋予唯一的 ID，还有图片右侧的按钮...

比如图像的 img1、img2、img3 和 onclick="getimg(1)", getimg(2), getimg(3)...

您可以使用 Javascript 轻松分配唯一 ID。只需应用循环并在循环内添加具有唯一 ID 的 imgs...

为了分配唯一性，我在下面分享示例...下面的代码仅供您参考。根据您的需要进行更改。您可以在 google 上搜索更多示例。

for(var i=0;i<yourRecordArray.length;i++){
    newList = document.createElement('li');
    newList.className = 'list-border';
    newList.id = 'imgdiv'+i;
    newList.innerHTML = '<img src="" id="img'+i+'">+
                        '<button onclick="">';
    document.getElementById('add').appendChild(newList);

Answer 5

我是这样解决的

function destra(y) {

    window.addEventListener("contextmenu", function(e){e.preventDefault();}, false);

    var r = confirm("do you want to know the src of the image?");

  if(r == true) {
    alert(y.src);
  } else {

  }

}

<img src="https://picsum.photos/150" alt="immagine1"id="immagine1" alt="immagine1" width="150" height="150" oncontextmenu="destra(this)">
<img src="https://picsum.photos/150" alt="immagine2" id="immagine2" alt="immagine2" width="150" height="150" oncontextmenu="destra(this)">

我如何在点击时显示图像 src

How i show image src on click

javascript

image

this

src

confirm