Jquery Accordion 标题图像

Question

我正在尝试将图像添加到 Accordion 页眉。在 mouseenter 和 mouseout 上，我能够成功更改图像。

但是当用户选择 Accordion 时，即当特定 Accordion 处于事件状态时，我能够更改图像。如果用户从一个 Accordion 移动到另一个 Accordion ，我无法替换离开 Accordion 的图像(即 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、mouseout 调用，它似乎按您的预期工作。

引用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");
})