Question

我需要在点击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 &amp; 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");

    });

但它仍然没有用。任何建议？

Answer 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");

});

如何在Jquery中单击div时交换图像？

1 个答案: