切换不适用于jQuery

Question

I don't know why this code of mine doesn't work... I want the "+" sign to be shown up and when we click on that sign then to be "-" and at the same time the paragraph be shown up. When we click the "-" sign to return in the initial state.

 $(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

Try this fiddle .

jQuery's toggle function doesn't handle the click event...you need to use click() for that.

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();
});

Answer 2

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

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();
});

It works!