交换图像并切换 div onclick

Question

我有一个动态填充的无序列表。其他所有列表项都被隐藏。第一个列表项包含一个图像，单击时会显示紧随其后的列表项。我的那部分代码工作正常。我似乎无法弄清楚的是如何交换切换图像 onclick。现在图像保持不变

感谢您提供的任何帮助

$(document).ready(function () {
  $(".slidingDiv").hide();

  $('.show_hide').click(function (e) {
    $(".slidingDiv").slideToggle("slow");
    var val = $(this).src() == "http://icdn.pro/images/en/m/i/minus-icone-9730-128.png" ? "https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" : "http://icdn.pro/images/en/m/i/minus-icone-9730-128.png";
    $(this).hide().src(val).fadeIn("slow");
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="storeTable">
  <li id="one" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
  <li id="two" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
</ul>

Answer 1

src() 不是 jQuery 对象的方法。如果你想读/写 src attribure，你可以直接在元素上进行（this 在事件处理程序中），或者使用 jQuery attr() 函数.在下面的代码中，我同时使用了：direct 用于读取，attr() 用于写入：

$(document).ready(function () {
  $(".slidingDiv").hide();

  $('.show_hide').click(function (e) {
    $(".slidingDiv").slideToggle("slow");
    var val = this.src == "http://icdn.pro/images/en/m/i/minus-icone-9730-128.png" ? "https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" : "http://icdn.pro/images/en/m/i/minus-icone-9730-128.png";
    $(this).hide().attr('src', val).fadeIn("slow");
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="storeTable">
  <li id="one" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
  <li id="two" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
</ul>

Answer 2

您可以使用 jQuery .attr() 方法或 Javascript 的 src 属性到 get 或 set 图像的src。您还希望保留单击图像的上下文，以便您可以切换到相关元素。为此，您可以替换：

$(".slidingDiv").slideToggle("slow");

有：

$(this).closest('li').next().slideToggle('slow');

或者我在下面的演示中使用的内容：

$(document).ready(function () {
    $(".slidingDiv").hide();
    //preload images
    $('<img/>',{src:"http://icdn.pro/images/en/m/i/minus-icone-9730-128.png"});
    $('<img/>',{src:"https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png"});
  
    $('.show_hide').click(function (e) {
        e.preventDefault();
        $(this).closest("li").next(".slidingDiv").slideToggle("slow");
        var val = this.src == "http://icdn.pro/images/en/m/i/minus-icone-9730-128.png" ? "https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" : "http://icdn.pro/images/en/m/i/minus-icone-9730-128.png";
        $(this).hide().attr('src', val).fadeIn("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="storeTable">
  <li id="one" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
  <li id="two" class="alwaysVisable">
    <h3>Title</h3>
    <p class="descript">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/miu/22/circle_add_plus-128.png" class="show_hide" width="32" height="32">
  </li>
  <li class="slidingDiv">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
  </li>
</ul>

更新

当不使用绝对 URL 时，您想使用 .attr() 而不是 .src。变化：

var val = this.src == "img/reward-info_on.png" ? "img/reward-info_off.png" : "img/reward-info_on.png";

收件人：

var val = $(this).attr('src') == "img/reward-info_on.png" ? "img/reward-info_off.png" : "img/reward-info_on.png";

交换图像并切换 div onclick

swap image and toggle div onclick

jquery

toggle