jquery - 一个jquery .toggle( handler(eventObject), handler(eventObject) [,...) 函数是自己执行的

Question

我在我的网页中使用了 jquery .toggle(between two functions) :

  $( ".cpUpbtnsclass" ).toggle(function() {
    console.log( "cpUpbtnsclass's clicked !" );
    }, function() {
        console.log( "cpUpbtnsclass's RE-clicked !" );
    });

当页面第一次加载时，我在控制台日志中看到写在这些函数上的消息。我还注意到恰好具有 class="cpUpbtnsclass"(而不是 class="xxx cpUpbtnsclass")的元素具有其 CSS 属性显示:无；不工作。只要我刚刚评论上面的 jquery 代码，一切都会恢复正常(我得到摆脱这些症状)

以下是与切换事件相关的 html 元素:

<div id="cropUploadbtns" >

<div id="upldimgbtn" class="displ1 cpUpbtnsclass" style="position:absolute; z-index:120; top:450px; left:70px; height:20px; width:165px; background-image: url('ressources/tunmecgenress/images/chngimgbtn.png'); display:none;">
<div id="uploadWholeimgDiv" style="position:absolute; top:-119px; left:14px;z-index:100; display:none;">
<img src="ressources/tunmecgenress/images/uploadWholeimg.png" />
</div>
<span style="margin-left:15px;font-size:12px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:yellow;" >Uploader l'image enti&#232;re</span>
</div>

<div id="cropimgbtn" class="displ1 cpUpbtnsclass" style="position:absolute; z-index:120; top:480px;  left:70px; height:20px; width:215px; background-image: url('ressources/tunmecgenress/images/selectzonebtn.png'); display:none; ">
<span style="margin-left:15px;font-size:12px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:yellow;" >S&#233;lectionner une zone de l'image</span>
</div>

<div id="upldselctedzon" class="cpUpbtnsclass"  style="position:absolute;z-index:110; top:495px; left:-50px; height:30px; width:300px; display:none;">
<div style="position:absolute; top:0px; left:0px;">
<img src="ressources/tunmecgenress/images/upldselctedzon.png" />
</div>
<span style="position:absolute; top:12px; left:30px; margin-left:15px;font-size:12px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:yellow;" >Uploader la zone selectionn&#233;e</span>
</div>

<div id="chngimgbtn" class="displ1 cpUpbtnsclass" style="position:absolute;z-index:120; top:510px; left:70px; height:20px; width:165px; background-image: url('ressources/tunmecgenress/images/chngimgbtn.png'); display:none;">
<span style="margin-left:15px;font-size:12px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:yellow;" >Choisir une autre image </span>
</div>


<div id="deselectimgbtn" class="cpUpbtnsclass" style="position:absolute;z-index:110; top:430px; left:199px; height:40px; width:116px;z-index:4;display:none;">
<div style="position:absolute; top:0px; left:0px;">
<img src="ressources/tunmecgenress/images/deselectimgbtn.png" />
</div>
<span style="position:absolute; top:20px; left:0px; margin-left:15px;font-size:12px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:yellow;" >D&#233;selectionner </span>
</div>

</div>

Answer 1

例如:

$(".cpUpbtnsclass").click(function () {
    this.toggle = !this.toggle;
    if (this.toggle) {
        console.log("cpUpbtnsclass's clicked !");
    } else {
        console.log("cpUpbtnsclass's RE-clicked !");
    }
});