Question

我在网页中使用了jquery .toggle（两个函数之间）：

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

首次加载页面时，我会在控制台日志中看到写在这些功能上的消息。我还注意到，精确地使用class =“cpUpbtnsclass”的元素（而不是class =“xxx cpUpbtnsclass”的CSS属性显示为：none;无法正常工作。只要我刚评论上面的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 !");
    }
});

一个jquery .toggle（handler（eventObject），handler（eventObject）[，...）函数由它自己执行

1 个答案: