Question

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

感谢您提供的任何帮助

＆＃13;

$(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();
  });
});

＆＃13;

<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>

＆＃13;

Answer 1

src()不是jQuery对象的方法。如果要读取/写入src attribure，可以直接在元素（事件处理程序内的this）上执行，也可以使用jQuery attr()函数。在下面的代码中，我使用了两个：直接阅读，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>

<强>更新

不使用绝对网址时，您希望使用.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

2 个答案: