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');
}

Answer 2

未经测试，但查看代码的结构，请尝试：

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

   // CHANGING IMAGE SHOULD BE DONE IN EACH CALLBACK
   if($('span.elipsis').is(':visible')){
     $('img.cond-arr').attr('href','/css/arr-up.png');
   }else{
     $('img.cond-arr').attr('href','/css/arr-down.png');
   }

});

另外 - jsfiddle plnkr - 不会伤害（它使每个人都更容易）。

Answer 3

更好的解决方案是将部件包裹起来隐藏在跨度中，然后隐藏该跨度。

在javascript条件块中添加HTML元素并不像一个可扩展的想法。

$(".content_wrap").each(function () {
  text = $(this).html();
  if (text.length > 350) {
      $(this).find('span.more').hide()
  }
});

并在CSS中（如果您没有旧的浏览器问题），请将箭头图像指定为背景

.someClass div.icon { background-image: url(...) }
.someClass:visible div.icon { background-image: url(...) }

Answer 4

  $('img.cond-arr').attr('href','/css/arr-down.png');

需要设置属性'src'所以它应该是：

  $('img.cond-arr').attr('src','/css/arr-down.png');

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

4 个答案: