Question

我不喜欢在HTML中放置我的事件监听器（在这种情况下特别是onclick），主要是因为我无法使用

（文档）$。就绪（函数（）{}）

我更愿意定义按钮“onclick，因为我在startup函数中对其进行了评论。但是，当我将监听器放入脚本时，this没有引用单击的按钮（我猜是因为它不“知道”我点击了哪个按钮）。我已尝试将event设置为showImage函数的参数，并在其中找到e.target，但这也无效。有没有办法在没有HTML标记内的onclick的情况下引用点击的按钮？

//$(document).ready(function() {
  window.onload = startup;
  function startup() {
    $("img").hide();
    //$("button").click(showImage(this));
  }
  function showImage(e) {
    var chosen = e.value;
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }
//});

body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" onclick="showImage(this)">Gris</button>
<button value="cow" onclick="showImage(this)">Ku</button>
<button value="sheep" onclick="showImage(this)">Sau</button>
<button value="hen" onclick="showImage(this)">Høne</button>

提前致谢！

PS。我猜其他人有这个问题，也许在这里被问到这个问题。我确实检查过我是否能在网站上找到类似的问题，但一无所获。但是，之前我没有找到，所以如果这是重复的话，我很抱歉。

PS2。我的代码中的图像不是我的，我也没有权利。请不要起诉我'：D

PS3（!!）。我不是一个经验丰富的程序员，我的术语可能在某些地方是错的。随意纠正我：）

Answer 1

首先，您需要在单击函数中定义function（），因此它应如下所示：

    $("button").click(function() {
        //code to execute here
    });

而不是：

    $("button").click(//code to execute here);

在按钮中调用this时，它会引用该按钮，如果我理解您的代码正确，则图像会被隐藏，因此如果是按钮，那么您无法点击隐藏的图像，如果您使用单独的按钮隐藏图片，然后在点击功能中需要将e表示为图像元素。

要使用this，您还需要将其称为$(this)而不仅仅是this。

Answer 2

this将在事件处理程序中设置为event.currentTarget Ref。如果你正在使用jQuery，你可以通过$(this)从中创建一个jQuery对象。所以要获得value，你可以做到：

var chosen = $(this).prop('value');

我还在按钮中添加了一个类myclass，以便使用$('.myclass')选择它，以便可以将其与页面中的其他可能按钮分开。您也可以执行$('button')来选择所有按钮，无论其类别如何。

<强>更新

刚看到你注释掉的代码：

$("button").click(showImage(this)); // When a button is clicked
 // call the function returned by showImage(this).. err it doesnt return 
 // a function so it fails.

您应该将函数引用或函数名称传递给click事件注册。像.click(showImage)没有任何函数调用()。在你的代码中，它将执行showImage(this)并将返回的值绑定到事件监听器，这显然会失败。

实际应该是：

$("button").click(showImage); // when a button is clicked
 // call the function showImage with this=<clicked button> and param=event

和this将自动在函数内设置为event.currentTarget

＆＃13;

$(document).ready(function() {
  window.onload = startup;
  function startup() {
    $("img").hide();
    //$("button").click(showImage(this));
  }
  function showImage(e) {
    var chosen = $(this).prop('value');
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }
  $('.myclass').on('click', showImage);
});

＆＃13;

body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" class="myclass">Gris</button>
<button value="cow" class="myclass">Ku</button>
<button value="sheep" class="myclass">Sau</button>
<button value="hen" class="myclass">Høne</button>

＆＃13;

Answer 3

这应该有用。

//$(document).ready(function() {
  window.onload = startup(); 
  function startup() {
   console.log("window loaded");
    $("img").hide();
    $("button").click(function() {showImage(this)});
  }
  function showImage(e) {
    console.log("onside eras");
    var chosen = e.value;
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }   
//});

如何在不将事件监听器放入HTML标记的情况下获取事件目标/这个？

3 个答案: