问题1

Question

我对Jquery还是很陌生，正在尝试学习它，我的代码似乎有问题，我希望它在单击按钮时更改图像，但是图像没有改变。

<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.3.1.min.js">
    $('input').toggle(
      function() {
        $('img').attr('src', '/images/test1.png');
      },
      function() {
        $('img').attr('src', '/images/test2.png');
      }
    );
  </script>
</head>

<body>
  <input value="change image" type="button" />
  <img src="test1.png" />
</body>

</html>

Answer 1

问题1

脚本元素加载单个脚本。

这可以来自开始标签和结束标签之间的代码或由src属性指定的URL。

它不能同时加载。

如果您同时提供这两个属性，则将使用src属性，并且将忽略内联脚本。

您需要两个脚本元素。一种是加载jQuery库，另一种是加载使用该库的脚本。

问题2

文档脚本运行时没有input元素。参见Why does jQuery or a DOM method such as getElementById not find the element?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(function() {
    $('input').toggle(
      function() {
        $('img').attr('src', 'https://placeimg.com/150/150/animals');
      },
      function() {
        $('img').attr('src', 'https://placeimg.com/150/150/people');
      }
    );
  });
</script>
<input value="change image" type="button" />
<img src="https://placeimg.com/150/150/animals" />

问题3

这看起来不像您想要的行为（toggle不会在每次单击某些内容时在两个函数之间切换），您可能想要使用click事件处理程序。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(function() {
    const one = 'https://placeimg.com/150/150/animals';
    const two = 'https://placeimg.com/150/150/people';

    $('input').on('click', toggle);

    function toggle() {
      const current = $('img').attr('src');
      $('img').attr('src', current === one ? two : one);
    }
  });
</script>
<input value="change image" type="button" />
<img src="https://placeimg.com/150/150/animals" />

Answer 2

使用此代码。

<!DOCTYPE html>
<html>
<head>
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
  this.src = this.src.replace("_off","_on");
} else {
  this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
</head>
<body>
<img src="xxxxxx_off.jpg" class="img-swap" />
</body>
</html>

我认为它对您有用。

Answer 3

我建议稍微更改html并建议以这种方式使用.click（）事件（通过“ switch”表达式对当前src进行检查），以便在单击按钮时更改图像src。 HTML：

<button value="change-image">test</button>
<img id='image' src="/images/test1.png" />

JS：

$('button').click(
function(){
  switch($('#image').attr('src')){
      case '/images/test1.png':
      $('#image').attr('src', '/images/test2.png');
      break;
      case'/images/test2.png':
      $('#image').attr('src', '/images/test1.png');
      break;
    default:
    //no default action
      break;
  }       
}
);

对我有用。

如何使用Jquery使按钮与另一个图像交换图像？

3 个答案:

问题1

问题2

问题3