Jquery Accordion Header图片

Question

我正在尝试将图片添加到手风琴标题中。在mouseenter和mouseout上，我可以成功更改图像。

但是，当用户选择一个手风琴，即当某个手风琴活跃时，我可以改变图像。如果用户从一个手风琴移动到另一个手风琴，我无法替换离开手风琴的图像（即oldHeader）。我尝试了不同的方式，但都是徒劳的。

我的代码工作示例可以用JSfiddle

$("#accordion").accordion({ 
 
    active: false, 
 
    collapsible: true 
 
}); 
 

 
$(function() { 
 
    $('#accordion h3').mouseenter(function() { 
 
     var data = $(this).text(); 
 
     if (data == 'Section 1') { 
 
      $("#img1").remove(); 
 
      $(this).append("<span id='img1' style='margin-left: 10px'><img src='http://icons.iconarchive.com/icons/filetypeicons/filetype/128/excel-icon.png' alt='icon'></span>"); 
 
     } 
 

 
     if (data == 'Section 2') { 
 
      $("#img2").remove(); 
 
      $(this).append("<span id='img2' style='margin-left: 10px'><img src='http://icons.iconarchive.com/icons/filetypeicons/filetype/128/pdf-icon.png' alt='icon'></span>"); 
 
     } 
 

 
     if (data == 'Section 3') { 
 
      $("#img3").remove(); 
 
      $(this).append("<span id='img3' style='margin-left: 10px'><img src='http://icons.iconarchive.com/icons/graphicloads/filetype/256/csv-icon.png' alt='icon'></span>"); 
 
     } 
 
    }); 
 
    $("#accordion h3").mouseout(function() { 
 
     var data = $(this).text(); 
 
     //alert(data); 
 
     if (data == 'Section 1') { 
 
      $("#img1").remove(); 
 
      $(this).append('<span id="img1" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/File-Excel-icon.png"></span>'); 
 
     } 
 
     if (data == 'Section 2') { 
 
      $("#img2").remove(); 
 
      $(this).append('<span id="img2" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Files-Pdf-icon.png"></span>'); 
 
     } 
 
     if (data == 'Section 3') { 
 
      $("#img3").remove(); 
 
      $(this).append('<span id="img3" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/icons8/windows-8/256/Files-Csv-icon.png"></span>'); 
 
     } 
 
    }); 
 

 
    $("#accordion h3").bind("click", function() { 
 
     var data = $(this).text(); 
 
     //alert(data); 
 
     var data1 = $(this).attr('class'); 
 
     var str = data1.match(/ui-accordion-header-active/ig); 
 
     if (data == 'Section 1' && str == 'ui-accordion-header-active') { 
 
      $(this).unbind('mouseout mouseover'); 
 
      $("#img1").remove(); 
 
      $(this).append('<span id="img1" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/filetypeicons/filetype/128/excel-icon.png"></span>'); 
 

 
     } 
 
     if (data == 'Section 2' && str == 'ui-accordion-header-active') { 
 
      $(this).unbind('mouseout mouseover'); 
 
      $("#img2").remove(); 
 
      $(this).append('<span id="img2" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/filetypeicons/filetype/128/pdf-icon.png" width="16" height="16"></span>'); 
 

 
     } 
 
     if (data == 'Section 3' && str == 'ui-accordion-header-active') { 
 
      $(this).unbind('mouseout mouseover'); 
 
      $("#img3").remove(); 
 
      $(this).append('<span id="img3" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/graphicloads/filetype/256/csv-icon.png" width="16" height="16"></span>'); 
 

 
     } 
 

 
    }); 
 
});

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
 
    background: #0000A0; 
 
} 
 
.ui-accordion-header-active { 
 
    background: #ff000f; 
 
} 
 
img { 
 
    width: 16px; 
 
    height: 16px; 
 
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="accordion"> 
 
    <h3>Section 1<span id="img1" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/File-Excel-icon.png" alt='icon'></span></h3> 
 

 
    <div> 
 
     <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p> 
 
    </div> 
 
    <h3>Section 2<span id="img2" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Files-Pdf-icon.png" alt='icon'></span></h3> 
 

 
    <div> 
 
     <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo.</p> 
 
    </div> 
 
    
 
<h3>Section 3<span id="img3" style="margin-left: 10px"><img src="http://icons.iconarchive.com/icons/icons8/windows-8/256/Files-Csv-icon.png" alt='icon'></span></h3> 
 

 
    <div> 
 
     <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa.</p> 
 
     <ul> 
 
      <li>List item one</li> 
 
      <li>List item two</li> 
 
      <li>List item three</li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

我换了几个ID和修改了的mouseenter，鼠标移开电话和它似乎你已经打算工作。

参考JSfiddle，但是作为一个例子：

$(function() { 
    $('#section1').mouseenter(function() { 
    $('#img1').attr("src", "http://icons.iconarchive.com/icons/filetypeicons/filetype/128/excel-icon.png"); 
}) 
    $('#section1').mouseout(function() { 
    $('#img1').attr("src", "http://icons.iconarchive.com/icons/iconsmind/outline/256/File-Excel-icon.png"); 
})