, wie Bilder auf jedem Klick ändern jquery mit

Question

Ich bin mit diesem HTML-Code auf meiner Website:

<a id="slick-toggle" href="javascript:change_status()"><img src="img/enable.png"></a> 

Wenn ich auf diesen Link klicken, würde Ich mag das Bild src zu img/disable.png ändern. Und kehren Sie zu img1.jpg zurück, wenn Sie wieder auf & klicken. Kann jemand erklären, wie ich das mit jQuery mache?

auch auf jedem Klick ich möchte meine Tabelle der Spalte emp_ref_table.enabled_flag Wert 0 für disable.png und 1 für enable.png Hier ändern ist meine vorhandene jQuery, ob das hilft:

function change_status() { 
    alert('sure to change the status ?'); 
    $(document).ready(function() { 
     $('#slick-toggle').click(function() { 
      e.preventDefault(); 
      $('img', this).attr('src', function(i, oldSrc) { 
       return oldSrc == 'img/enable.png' ? 'img/disable.png' : 'img/enable.png'; 
      }); 

      return false; 
     }); 
    }); 
} 

Answer 1

diesen Code Versuchen: Ort alle Ihre pic Ändern Code in einer Funktion:

var changeStatus = false; 
 
      function change_status() { 
 
       var r = window.confirm("Sure to change the status!"); 
 
       if (r == true) { 
 
        if (changeStatus == false) { 
 
         changeStatus = true; 
 
         document.getElementById("en-ds").src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg"; 
 
        } else { 
 
         changeStatus = false; 
 
         document.getElementById("en-ds").src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"; 
 
        } 
 
       } 
 
      }

<a id="slick-toggle" href="javascript:change_status()"><img id="en-ds" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"> 
 
     </a>

Answer 2

Probieren Sie die vereinfachte unten aus, legen Sie Ihre Bildpfade aktivieren und deaktivieren.

$(function() { 
 
    $('#slick-toggle').click(function() { 
 
    $('img', this).attr('src', function(el, src) { 
 
     var imgEnable = 'http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg'; 
 
     var imgDisable = 'https://www.google.com/logos/2012/d4g_poland12-hp.jpg'; 
 
     return (src == imgEnable) ? imgDisable : imgEnable; 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="slick-toggle" href="javascript:;"> 
 
    <img src="http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg">