Question

我正在编写一个脚本，当鼠标悬停在div上时，图像源会发生变化。我已经弄清楚如何通过单独选择图像来更改源，但我想通过使用.find（）选择div中的图像来更改源。什么东西不起作用？

＆＃13;

$(document).ready(function() {
  // Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg";
  imgList["ref1"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg";
  imgList["ref2"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg";
  imgList["ref2"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg";
  imgList["ref3"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg";
  imgList["ref3"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg";


//Add the swapping functions
  $("div").mouseover(function(){
    $(this).find('img').attr("src", imgList[ $(this).attr("id") ]["over"]);
  });
  $("div").mouseout(function(){
    $(this).find('img').attr("src", imgList[ $(this).attr("id") ]["out"]);
  });

});

＆＃13;

div  {
  width:100px;
  display:inline-block;
}
img {
  width:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/>
</div>
<div>
  <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/>
</div>
<div>
  <img src="http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg" id="ref1"/>
</div>

＆＃13;

Answer 1

你必须声明对象不是数组

// Declare objects

      imgList = {};
      imgList["ref1"] = {};
      imgList["ref2"] = {};
      imgList["ref3"] = {};

$(this).attr("id")表示您从[{1}}而不是id

寻找at div

＆＃13;

img

＆＃13;

$(document).ready(function() {
  // Declare objects

  imgList = {};
  imgList["ref1"] = {};
  imgList["ref2"] = {};
  imgList["ref3"] = {};

//Set values for each mouse state
  imgList["ref1"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg";
  imgList["ref1"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg";
  imgList["ref2"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg";
  imgList["ref2"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg";
  imgList["ref3"]["out"] = "http://img-aws.ehowcdn.com/600x600p/photos.demandstudios.com/142/14/fotolia_1230128_XS.jpg";
  imgList["ref3"]["over"] = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/European_cat_02.jpg/400px-European_cat_02.jpg";


  
  //Add the swapping functions

  $("div").mouseover(function() {
   $(this).find('img').attr("src", function() {
      return imgList[this.id].over; 
   });

  });
  $("div").mouseout(function() {
    $(this).find('img').attr("src", function() {
      return imgList[this.id].out; 
   });
  });

});

＆＃13;

div  {
  width:100px;
  display:inline-block;
}
img {
  width:100%;
}

＆＃13;

Answer 2

您的脚本/标记有三个问题。

ids必须是唯一的<img id="ref1" />，但这可能只是一个拼写错误
imgList和ref - 元素应该是对象{}而不是数组[]（JavaScript没有关联数组）
这两个地方this的值：

$(this).find('img').attr("src", imgList[ $(this).attr("id") ]["over"]);
$(this).find('img').attr("src", imgList[ $(this).attr("id") ]["out"]);

this在这种情况下是<div>元素，因此$(this).attr("id")会返回id元素的<div>而不是id <img>元素。

解决此问题的一种方法是使用.attr( attributeName, function )

<强>的attributeName
  输入：String
  要设置的属性的名称。

<强>功能
  输入：Function( Integer index, String attr ) =＆gt; String或Number
  将值返回到set的函数。 this是当前的   元件。接收集合中元素的索引位置和   旧属性值作为参数

$(document).ready(function() {
  // Declare Arrays
  var imgList = {
    ref1: {
      out: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg",
      over: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg/320px-Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg"
    },
    ref2: {
      out: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg",
      over: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg/320px-Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg"
    },
    ref3: {
      out: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg",
      over: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg/320px-Katzen_und_ihre_Sonnenpl%C3%A4tze.jpg"
    }
  };

  //Add the swapping functions
  $("div").mouseover(function() {
    $(this).find('img').attr("src", function() {
      return imgList[this.id].out;
    });
  });
  $("div").mouseout(function() {
    $(this).find('img').attr("src", function() {
      return imgList[this.id].over;
    });
  });
});

div { width: 200px; height: 100px }
img { width: 100%; height: 100% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg" id="ref1" />
</div>
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg" id="ref2" />
</div>
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/065-Barcelona-Cat-2.jpg/320px-065-Barcelona-Cat-2.jpg" id="ref3" />
</div>

使用.find（）更改图像jQuery上的src

2 个答案: