在div jQuery下只定位一个图像

Question

我试图根据随机数显示不同的图像。如果数字不是2，我想将图像更改为用户点击的框上的box-lose。

不幸的是，我无法定位此图片。我想只将用户点击的图像更改为丢失的图像。 see jsfiddle here这可能会使问题更加清晰。我曾尝试使用closest和find，但我似乎无法定位该元素。

JS

$('.box').click(function(){

    var randomNumber = 1;
    var thisBox = $(this);

    if(randomNumber === 2){
       alert('number is 2');
   } else {                 
       thisBox.closest('img').find('.box-img').css('display', 'none');
       thisBox.closest('img').find('.box-lose').css('display', 'block');
   }
});

HTML

<div class="box">
   <img class="box-img" src="http://assets.nydailynews.com/polopoly_fs/1.986006.1336765559!/img/httpImage/image.jpg_gen/derivatives/gallery_1200/hulk-hogan-pastamania.jpg">
   <img class="box-win" src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
   <img class="box-lose" src="http://images.huffingtonpost.com/2014-12-11-Hulk.jpg">
</div>

<div class="box">
  <img class="box-img" src="http://assets.nydailynews.com/polopoly_fs/1.986006.1336765559!/img/httpImage/image.jpg_gen/derivatives/gallery_1200/hulk-hogan-pastamania.jpg">
  <img class="box-win" src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
  <img class="box-lose" src="http://images.huffingtonpost.com/2014-12-11-Hulk.jpg">
</div>

<div class="box">
  <img class="box-img" src="http://assets.nydailynews.com/polopoly_fs/1.986006.1336765559!/img/httpImage/image.jpg_gen/derivatives/gallery_1200/hulk-hogan-pastamania.jpg">
  <img class="box-win" src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
  <img class="box-lose" src="http://images.huffingtonpost.com/2014-12-11-Hulk.jpg">
</div>

Answer 1

<强>

的 Updated fiddle

我认为click事件在第一次使用时没有触发。所以我只使用了.on - click，然后将代码包装在$(function()又名$(document).ready中。此外，您不需要使用 .closest ，因为它将搜索DOM树中的链接元素及其祖先。以下是更新后的代码：

$(function() {
    $('.box').on('click', function() {
        var randomNumber = Math.floor((Math.random() * 3) + 1);
        var thisBox = $(this);
        if (randomNumber === 2) {
            alert('number is 2');
        } else {
            thisBox.find('.box-img').css('display', 'none');
            thisBox.find('.box-lose').css('display', 'block');
        }
    });
});

Answer 2

如果您想要赢取和输掉一个coinflip并在结果上显示某个图片，您只需创建一个随机数并为您的选择器定义一个上下文。 JSFiddle

您应该避免使用.closest()等功能。总有更好的选择。

$('.box').on('click', function() {
  var randomNumber = Math.floor(Math.random() * 2) + 1;
    $('.box-img', $(this)).hide();
  if (randomNumber === 2) {
    $('.box-win', $(this)).show();
  } else {
    $('.box-lose', $(this)).show();
  }
});