我正在尝试将图像添加到手风琴标题中。在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>
答案 0 :(得分:0)
我更改了一些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");
})