Javascript 我想在单击时更改div的图片_Javascript_Jquery_Html_Css

Javascript 我想在单击时更改div的图片

javascript jquery html css

Javascript 我想在单击时更改div的图片,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我实现了一个jQuery功能，在单击时打开一个closediv。我在解锁时在div中设置了加号；单击div时，我希望加号改为减号。然而，我在这方面遇到了麻烦。这是我到目前为止编写的代码： HTML: jQuery： <![CDATA[//><!-- $(function() { $("#content h3.expand").toggler(); $("#content div.demo").expandAl

我实现了一个jQuery功能，在单击时打开一个closediv。我在解锁时在div中设置了加号；单击div时，我希望加号改为减号。然而，我在这方面遇到了麻烦。这是我到目前为止编写的代码：

HTML:

jQuery：

<!--//--><![CDATA[//><!--
    $(function() {
        $("#content h3.expand").toggler();
        $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
        $("#content div.other").expandAll({
            expTxt : "[Show]", 
            cllpsTxt : "[Hide]",
            ref : "ul.collapse",
            showMethod : "show",
            hideMethod : "hide"

        });

        $("#content div.post").expandAll({
            expTxt : "[Read this entry]", 
            cllpsTxt : "[Hide this entry]",
            ref : "div.collapse", 
            localLinks: "p.top a"    
        });    
    });
//--><!]]>

当我点击面板时，有人能帮我把加号改成减号吗？相反，当面板向后折叠时，应显示加号

库/脚本：

jQuery 1.4.2 javascript/expand.js 我在我的代码中这样做

函数法{

    $(function() {
       $( "#expand" ).click(function() {
         $( "#collapse" ).toggleClass( "collapse-close collapse-open");
       });
     });

}

</script>
   </head>

     <body>
      <div id="wrapper"> 
     <div id="content">  
         <div class="demo">
              <h2 align="center">DASHBOARD</h2>

     <h3 class="expand collapse-close" onclick="aMethod();">STPCODE NOT REGISTERED &nbsp;&nbsp; 10 <span></span>  </h3>      
          <div class="collapse">
            <p>List of unregistered user are here</p>
           </div>

使用.toggleClass类名称

参考：

就像@Rajesh Kumar已经说过的，您可以使用jQuery.toggleClass

但是我建议您使用.toggleClass。它的代码更少，也可以做到同样的效果，只是更简单、更清晰。

进入并在函数/jquery代码中使用jquery toggleClass方法，如：

实现了无需expand.js即可实现的功能看一看，它可能会有帮助：

<head>
    <style type="text/css">
        /* --------
        The CSS rules offered here are just an example, you may use them as a base. 
        --------- */
        * {margin:0; padding:0}
        /* --- Page Structure  --- */


        #wrapper{
            margin:0 auto;
            padding:15px 15% 8em;
            text-align:left
        }
        #content {
            max-width:70em;
            width:70%;
            margin:0 auto;
            padding-bottom:20px;
            overflow:hidden
        }
        .demo {
            margin:1.5em 0;
            padding:1.5em 1.5em 0.75em;
            /*  border:1px solid #ccc; */
            position:relative;
            overflow:hidden
        }
        .collapse p {padding:0 10px 1em}

        .switch {position:absolute; top:1.5em; right: 1.5em; padding:3px}

        .post .switch {position:static; text-align:right}

        .post .main{margin-bottom:.3em; padding-bottom:0}

        .other li, .summary {margin-bottom:.3em; padding:1em; border:1px solid #e8e7e8; background-color:#f8f7f8}

        .other ul {list-style-type:none; text-align:center}

        /* --- Headings  --- */


        .expand{padding-bottom:.75em;background-color: #CFDEFF; border:1px solid #FFFFFF;   }
        .expand a{color:#2A51A0;}
        .expand a span {padding-left:100px;}

        .collapse-close span {
            display:block;
            float:right;
            background-size: 20px;
            padding:10px;
        }

        .collapse {
            transition: 1s;
        }

        .plus {
            background:url(http://png-2.findicons.com/files/icons/1007/crystal_like/256/plus.png) center center no-repeat;
        }

        .minus {
            background:url(http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/panel/minus.png) center center no-repeat;
        }

        .display-none {
            display: none;
        }

        .trigger{
            cursor: pointer;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.collapse-close span').click(function(){
            debugger;
                if(this.classList.contains('plus')){
                    this.classList.remove("plus");
                    this.classList.add("minus");
                    $(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
                }
                else{
                    this.classList.remove("minus");
                    this.classList.add("plus");
                    $(this.parentElement.parentElement).children(".collapse").addClass('display-none');
                }
            })
            $('.trigger').click(function(){
                if(this.classList.contains('expand-all')){
                    $('.collapse-close span').each(function(){
                        this.classList.remove("plus");
                        this.classList.add("minus");
                        $(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
                    });
                    this.classList.remove('expand-all');
                    this.classList.add('collapse-all');
                    $(this).html('[Collapse All]');
                }
                else {
                    $('.collapse-close span').each(function(){
                        this.classList.remove("minus");
                        this.classList.add("plus");
                        $(this.parentElement.parentElement).children(".collapse").addClass('display-none');
                    });
                    this.classList.remove('collapse-all');
                    this.classList.add('expand-all');
                    $(this).html('[Expand All]');
                }
            });
        });
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="content">
            <div class="demo">
                <h2 align="center">DASHBOARD</h2>
                <div class='trigger expand-all'>[Expand All]</div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">STPCODE NOT REGISTERED &nbsp;&nbsp; 10 <span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>List of unregistered user are here</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">REGISTERED USERS IN DRAFT MODE 10 <span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>List of  user in draft mode are here</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS 10<span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>Total number of users who have their payment initiated</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS 10 <span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>Total number of users who have their payment received</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">PAYMENT  DISAPPROVED FOR USERS 10<span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>Total number of users who have their payment disapproved</p>
                    </div>
                </div>
            </div>
        </div>          
    </div>
</body>

我将在哪里使用它，你能说得具体一点吗？你能创建一个JSFIDLE吗？因为你的HTML中有一些语法错误。你的CSS中也有类似的错误{。但是没有ID为collapse close的元素。因此，如果您创建fiddle，我们可以很容易地确定您的代码问题。我不知道如何创建fiddle请查看我编辑的代码部分它不工作函数aMethod{$h3.clickfunction{$this.toggleClass'collapse-open'；}；}这是我正在做的，但工作正常

    $(function() {
       $( "#expand" ).click(function() {
         $( "#collapse" ).toggleClass( "collapse-close collapse-open");
       });
     });

}

</script>
   </head>

     <body>
      <div id="wrapper"> 
     <div id="content">  
         <div class="demo">
              <h2 align="center">DASHBOARD</h2>

     <h3 class="expand collapse-close" onclick="aMethod();">STPCODE NOT REGISTERED &nbsp;&nbsp; 10 <span></span>  </h3>      
          <div class="collapse">
            <p>List of unregistered user are here</p>
           </div>

<div class="first"></div>

$("div").click(function(){
    $(this).toggleClass('second');
});

<div class="first"></div>

$("div").click(function(){
    if($("div").hasClass("first")){
        $(this).removeClass("first");
        $(this).addClass("second");
    }

    else{
        $(this).removeClass("second");
        $(this).addClass("first");
    }
});

#collapse-close {
    display:block;
    float:right;
    background:url(images/minus.png) center center no-repeat;
    padding:10px;
}

.collapse-open span{
    background:url(images/minus.png) center center no-repeat;
}

.toggleClass('collapse-close collapse-open')

<head>
    <style type="text/css">
        /* --------
        The CSS rules offered here are just an example, you may use them as a base. 
        --------- */
        * {margin:0; padding:0}
        /* --- Page Structure  --- */


        #wrapper{
            margin:0 auto;
            padding:15px 15% 8em;
            text-align:left
        }
        #content {
            max-width:70em;
            width:70%;
            margin:0 auto;
            padding-bottom:20px;
            overflow:hidden
        }
        .demo {
            margin:1.5em 0;
            padding:1.5em 1.5em 0.75em;
            /*  border:1px solid #ccc; */
            position:relative;
            overflow:hidden
        }
        .collapse p {padding:0 10px 1em}

        .switch {position:absolute; top:1.5em; right: 1.5em; padding:3px}

        .post .switch {position:static; text-align:right}

        .post .main{margin-bottom:.3em; padding-bottom:0}

        .other li, .summary {margin-bottom:.3em; padding:1em; border:1px solid #e8e7e8; background-color:#f8f7f8}

        .other ul {list-style-type:none; text-align:center}

        /* --- Headings  --- */


        .expand{padding-bottom:.75em;background-color: #CFDEFF; border:1px solid #FFFFFF;   }
        .expand a{color:#2A51A0;}
        .expand a span {padding-left:100px;}

        .collapse-close span {
            display:block;
            float:right;
            background-size: 20px;
            padding:10px;
        }

        .collapse {
            transition: 1s;
        }

        .plus {
            background:url(http://png-2.findicons.com/files/icons/1007/crystal_like/256/plus.png) center center no-repeat;
        }

        .minus {
            background:url(http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/panel/minus.png) center center no-repeat;
        }

        .display-none {
            display: none;
        }

        .trigger{
            cursor: pointer;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.collapse-close span').click(function(){
            debugger;
                if(this.classList.contains('plus')){
                    this.classList.remove("plus");
                    this.classList.add("minus");
                    $(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
                }
                else{
                    this.classList.remove("minus");
                    this.classList.add("plus");
                    $(this.parentElement.parentElement).children(".collapse").addClass('display-none');
                }
            })
            $('.trigger').click(function(){
                if(this.classList.contains('expand-all')){
                    $('.collapse-close span').each(function(){
                        this.classList.remove("plus");
                        this.classList.add("minus");
                        $(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
                    });
                    this.classList.remove('expand-all');
                    this.classList.add('collapse-all');
                    $(this).html('[Collapse All]');
                }
                else {
                    $('.collapse-close span').each(function(){
                        this.classList.remove("minus");
                        this.classList.add("plus");
                        $(this.parentElement.parentElement).children(".collapse").addClass('display-none');
                    });
                    this.classList.remove('collapse-all');
                    this.classList.add('expand-all');
                    $(this).html('[Expand All]');
                }
            });
        });
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="content">
            <div class="demo">
                <h2 align="center">DASHBOARD</h2>
                <div class='trigger expand-all'>[Expand All]</div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">STPCODE NOT REGISTERED &nbsp;&nbsp; 10 <span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>List of unregistered user are here</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">REGISTERED USERS IN DRAFT MODE 10 <span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>List of  user in draft mode are here</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS 10<span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>Total number of users who have their payment initiated</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS 10 <span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>Total number of users who have their payment received</p>
                    </div>
                </div>
                <div class="ques-ans">
                    <h3 class="expand collapse-close">PAYMENT  DISAPPROVED FOR USERS 10<span class="plus"></span></h3>
                    <div class="collapse display-none">
                        <p>Total number of users who have their payment disapproved</p>
                    </div>
                </div>
            </div>
        </div>          
    </div>
</body>