如何使用jquery在每次单击时更改图像

时间:2016-04-01 05:34:37

标签: javascript jquery html

我在我的网站上使用此HTML:

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

当我点击此链接时,我想将图像src更改为img / disable.png。再次点击时恢复为img1.jpg等等。有人可以解释我是如何使用jQuery做到这一点的吗?

同样在每次点击时,我想更改我的表格列emp_ref_table.enabled_flagdisable.png的值为0,enable.png的值为1 这是我现有的jQuery,如果这有帮助:

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

2 个答案:

答案 0 :(得分:1)

尝试此代码:将所有图片更改代码放入函数中:

&#13;
&#13;
NULL
&#13;
INSERT INTO Currency (CurrencyCode, CurrencyName)
    SELECT 
        CurrencyCode,
        CASE
            WHEN CurrencyCode = ''
              THEN NULL
        END
    FROM Contract
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试下面的简化版,设置启用和禁用图像路径。

&#13;
&#13;
$(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;
    });
  });
});
&#13;
<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">
&#13;
&#13;
&#13;