javascript - Jquery - 如果元素可见或隐藏，更改图像属性源？

Question

我花了几个小时试图解决我的代码无法工作的原因。基本上，我试图更改图像源，如果元素“span”隐藏或可见(如果它可见，它应该显示向上箭头，如果它隐藏应该显示向下箭头 - 对我来说没有成功。)。默认情况下元素跨度是隐藏的。单击该箭头后，它会隐藏或显示较长的文本(效果很好)。您能帮我解决这个代码吗？非常感谢 PS:jsfiddle

Jquery:

$(".content_wrap").each(function () {
  text = $(this).html();
  if (text.length > 350) {
      $(this).html(text.substr(0, 342) + '<span class="elipsis" style="display:none;">' + text.substr(343) + '</span><a color: #236EE8; class="elipsis" href="#"><img class="cond-arr" src="/css/arr-down.png" alt="arrow" /></a>');
    <!-- one line above is code where is my image -->
  }
});

$(".content_wrap > a.elipsis").click(function (e) {
   e.preventDefault(); //prevent from being added to the url
   $(this).prev('span.elipsis').fadeToggle(500);
});

if($('span.elipsis').is(':visible')){
  $('img.cond-arr').attr('href','/css/arr-up.png');
}else{
  $('img.cond-arr').attr('href','/css/arr-down.png');
}

HTML:

<div>
  <span class="content_wrap">Something very long longer than 350 letters</span> <!-- cut code after 342 letters hide rest and show arrow down to expand content. When is expanded show full code with arrow up to collapse content back to 342 letters and show arrow down again -->
  <span class="content_wrap">Something short less than 350 letters</span><!-- show full code without cut and without arrow as image -->
</div>

Answer 1

如果您想更改图像源，您需要更改 src 而不是 href，如下所示

if($('span.elipsis').is(':visible')){
 $('img.cond-arr').attr('src','/css/arr-up.png');}
else{
 $('img.cond-arr').attr('src','/css/arr-down.png');
}