Question

使用此代码a切换Div并将箭头img更改为向上或向下图像。第一个Div默认打开，第二个关闭。我的问题是，如果我点击第一个div的图像来关闭它，图像/ div会改变，但是如果我将鼠标移出图像，它会变回默认值。我怎么能改变它？

＆＃13;

var org_src;
$("img.mgu-rollover").hover(
  function() {
    org_src = this.src;
    this.src = $(this).attr("data-rolloverImage");
  },
  function() {
    this.src = org_src;
  }
);

$('.mgu-event-btn').click(function() {
  var open = $(this).attr('rel');
  $('#' + open).toggle().toggleClass("active");
  if ($('#' + open).hasClass('active')) {
    $(this).find('img').attr('src', 'img/Pikto_Bubble_up_off.png');
    $(this).find('img').attr('data-rolloverImage', 'img/Pikto_Bubble_up_over.png');

  } else {
    $(this).find('img').attr('src', 'img/Pikto_Bubble_down_off.png');
    $(this).find('img').attr('data-rolloverImage', 'img/Pikto_Bubble_down_over.png');
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mgu-event-btn" rel="mgu-event-1">
  <img class="mgu-rollover" data-rolloverImage="img/Pikto_Bubble_up_over.png" src="img/Pikto_Bubble_up_off.png" width="30" height="30">
</div>

<div class="mgu-event-btn" rel="mgu-event-2">
  <img class="mgu-rollover" data-rolloverImage="img/Pikto_Bubble_down_over.png" src="img/Pikto_Bubble_down_off.png" width="30" height="30">
</div>

＆＃13;

Answer 1

问题当然是this.src = org_src;，如果点击了图片，您可能不想这样做 -

function() { 
  if (this.src.indexOf("down")==-1) this.src = org_src;
}

例如

移出后翻转和图像更改错误

1 个答案: