javascript - 切换在 jQuery 中不起作用

Question

我不知道为什么我的这段代码不起作用...我希望显示“+”符号，当我们单击该符号时，就会显示“-”，同时段落被显示。当我们点击“-”号时就返回到初始状态。

$(document).ready(function() {
  $("#main").append("<img src='https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png' id='clickMe' />");
  $("#message").hide();

  $("#clickMe").toggle(function() {
      $("#clickMe").attr("src", "https://webapps-cdn.esri.com/graphics/ui/minus-sign-10.png");
      $("#message").show();
    },
    function() {
      $("#clickMe").attr("src", "https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png");
      $("#message").hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="main"></div>
<p id="message">You should see this message!</p>

Answer 1

尝试this fiddle .

jQuery 的 toggle函数不处理点击事件...您需要使用 click() 来处理。

var $clickMe = $("#clickMe"),
    $message = $("#message");

function toggle() {
    if ($message.is(':visible')) {
        $clickMe.attr("src","https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png");
        $message.hide();
    } else {
        $clickMe.attr("src","https://webapps-cdn.esri.com/graphics/ui/minus-sign-10.png");
        $message.show();
    }
}

$clickMe.click(function(){
    toggle();
});