不重复自己

Question

我正在尝试编写代码让方块在我点击它们时改变颜色：

function change(image) {
switch (image) {
    case 1:
        var image = document.getElementById('first');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;
    case 2:
        var image = document.getElementById('second');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;
    case 3:
        var image = document.getElementById('third');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;
    default:
    var image = document.getElementById('forth');
        if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }
        break;

我一遍又一遍地重复这个部分：

if (image.src.match("square1.png")) {
            image.src = "squareblue1.jpg";
        } else {
            image.src = "square1.png";
        }

我试图将它变成一个函数，但必须调用该函数 "image" 否则会弹出一个错误，指出图像未定义，我已经在另一个变量中使用了图像。有没有办法通过将代码放在函数中来缩短我的代码？

Answer 1

var IMAGES = {
  1: 'first',
  2: 'second',
  3: 'third',
  default: 'fourth'
};
function change(image) {
    var imageID = IMAGES[image] || IMAGES.default;
    var image = document.getElementById(imageID);
    if (image.src.match("square1.png")) {
        image.src = "squareblue1.jpg";
    } else {
        image.src = "square1.png";
    }
}

这是您代码的字面意思。但是，重新实现会更好。例如，使用背景样式而不是图像元素可以让您通过添加或删除 class.

来实现同样的效果

Answer 2

包括 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后你可以让颜色在每次点击图像时改变，但是让函数只改变this图像

$("img").click(function(){
    $(this).src = "new src";
});

希望对您有所帮助

Answer 3

使用不同的变量名怎么样？

function change (image) {
   switch (image) {
      case 1:
         changeSrc('first');
         break;
      case 2:
         changeSrc('second');
         break;
      ...

   function changeSrc (id) {
      var image = document.getElementById(id);
      if (image.src.match("square1.png")) {
          image.src = "squareblue1.jpg";
      } else {
          image.src = "square1.png";
      }
   }
}

Answer 4

我认为你可以做的就是简单地使用 switch 定义 image 变量，然后用它做你需要的。

var image;
switch(image) {
    case 1:
        image = document.getElementById('first');
        break;
    case 2:
        image = document.getElementById('second');
        break;
    ...
}

if (image.src.match("square1.png")) {
    image.src = "squareblue1.jpg";
} else {
    image.src = "square1.png";
}

如果您愿意，还可以将更改 src 的行提取到一个函数中。如果其他功能也这样做，这将很有用。

Answer 5

可以使用包含元素 ID 的数组，这样：

function change(image) {

  var ids = [
    null,
    'first',
    'second',
    'third',
    'forth'
  ];

  var img = document.getElementById(ids[image]);
  img.src = image.src.match('square1.png') ?
    'squareblue1.jpg' :
    'square1.png';
}

不重复自己

Not repeating myself

javascript

dry

function