Question

我想在单击父元素时更改图像元素的source属性。 child / image元素实际上嵌套在两个div中，这使得事情稍微复杂化，我怀疑这是我的代码中出错的地方。

JavaScript如下：

    <script src="js/jquery-1.7.2.min.js"></script>
  <script>
      $(document).ready(function () {
          $('.slideContent').hide();
          $('.slideHeader').toggle(
                 function () {
                     $(this).next('.slideContent').slideDown();
                     $(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconUp.png";
                 },
                 function () {
                     $(this).next('.slideContent').fadeOut();
                     $(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconDown.png";
                 }
             ); // end toggle
      }); // end ready

HTML是：

<div class="slideHeader">
  <div class="dropDownIcon">
   <img class="dropDownClass" src="./images/dropDownIconDown.png"/>
  </div>
  <div>
   <p>2014</p>
  </div>
</div>
<div class="slideContent">
  <div>
    <p>2014</p>
  </div>
</div>

jQuery的slideDown和fadeOut函数工作正常。但是，图像更改不会发生。所以我相信我的错误在以下代码中：

$(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconUp.png";

但据我所知，我在链条中选择了正确的元素。如果有人能对此发光，那将非常感激。随着互联网上的其他一切验证上面的代码应该工作（虽然有点凌乱）。

提前致谢。

Answer 1

src是attribute代码的img，因此请使用.attr()

尝试，

$(this).children('.dropDownIcon').children('img').attr('src', "./images/dropDownIconUp.png");

Answer 2

而不是使用子选择器两次使用$(this).find('img').attr('src','./images/dropDownIconUp.png')

Answer 3

我知道你接受了答案，但让我简单地告诉你一些要点

.src = "blah"不适用于jquery对象。$()总是返回一个jquery对象，你必须使用.attr() or .prop()来处理jquery对象

然而，jquery提供了一种转换为javascript对象的简单方法

如果你仍然希望用作javascript对象，你就可以这样做

$(".slideHeader").children('.dropDownIcon').children('img')[0].src = "./images/dropDownIconDown.png";

如何使用JavaScript更改子元素的来源？

3 个答案: