我需要在点击div标签时交换图像这是我的代码
<div class="accordionButton" style="border-style: none; border-color: #3399FF; background-color: #66CCFF;">
<img alt="" class="img-swap" src="../../Content/ss_up.jpg" style="height: 19px; width: 21px" />Customer & Catogory Parameters
</div>
<div class="accordionContent" style="border-style: none; border-color: #FFFFFF;">
Customer group *:
<input type="text" id="Text1" />
<a href="#link" style="color: #3399FF">Search</a> Product group * :
<input type="text" id="Text3" />
<a href="#link1" style="color: #3399FF">Search</a>
<input type="button" id="Button1" value="Go" style="background-color: #3399FF; width: 42px; margin-left: 0px;" />
</div>
和
$(document).ready(function () {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function () {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if ($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
单击图像交换时
$('.img-swap').click(function () {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_up", "_down");
}
else {
this.src = this.src.replace("_down", "_up");
}
$(this).toggleClass("down");
});
$('.accordionContent').hide();
});
但我需要在点击div时交换该图像,我尝试过这样的
$(document).ready(function () {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function () {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if ($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
if ($('.img-swap').attr("class") == "img-swap") {
$('.img-swap').src = $('.img-swap').src.replace("Content/Images/arrow.jpg", "Content/Images/arrow_down.jpg");
}
else {
$('.img-swap').src = $('.img-swap').src.replace("Content/Images/arrow_down.jpg", "Content/Images/arrow.jpg");
}
$('.img-swap').toggleClass("arrow_down");
});
但它仍然没有用。任何建议?
答案 0 :(得分:1)
我会做
$('.img-swap').click(function() {
//check if it has the class down
if ($(this).hasClass("down")) {
//if it has it, use replace down with up
this.src = $(this).attr('src').replace("_down", "_up");
} else {
this.src = $(this).attr('src').replace("_up", "_down");
}
$(this).toggleClass("down");
});
在这里摆弄(看看萤火虫,行为是正确的)http://jsfiddle.net/w3c35/
P.S。我只使用this.src
左手,因为this.src
返回完整地址(http://jsfiddle.net/Content/ss_up
)而$(this).attr('src')
返回../../Content/ss_up.jpg
交换div.accordionButton
的点击$(document).ready(function(){
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function () {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if ($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
var $img = $('img', this);
if ($img.hasClass("down")) {
//if it has it, use replace down with up
$img.attr('src', $img.attr('src').replace("_down", "_up"));
} else {
$img.attr('src', $img.attr('src').replace("_up", "_down"));
}
$img.toggleClass("down");
});