Question

我在前一段时间创建了这个小游戏，现在我正在尝试找到一种让脚本更简短更简单的方法我想知道是否还有其他方法。我有四张动物照片并且吹了我有四个名字的照片。游戏假设要做的是当用户点击右图和右图时，图像和名称都必须消失。任何帮助都非常感激

function image_select() {
    var pic1 = document.getElementById("cow").value;
    var text1 = document.getElementById("cow_t").value;

    if (document.getElementById("cow").checked) {
        if (pic1 == text1) {
            var x = document.getElementById("cow_s");
            x.play();
        } else {
            alert("wrong selection");
        }
    } else {
        alert("no");
    }
}

function image_select2() {
    var pic2 = document.getElementById("dog").value;
    var text2 = document.getElementById("dog_t").value;

    if (document.getElementById("dog").checked) {
        if (pic2 == text2) {
            var x = document.getElementById("dog_s");
            x.play();
        } else {
            alert("wrong selection");
        }
    } else {
        alert("no");
    }

}


function image_select3() {
    var pic3 = document.getElementById("horse").value;
    var text3 = document.getElementById("horse_t").value;

    if (document.getElementById("horse").checked) {
        if (pic3 == text3) {
            var x = document.getElementById("horse_s");
            x.play();
        } else {
            alert("wrong selection");
        }
    } else {
        alert("no");
    }

}

function image_select4() {
    var pic4 = document.getElementById("pig").value;
    var text4 = document.getElementById("pig_t").value;

    if (document.getElementById("pig").checked) {
        if (pic4 == text4) {
            var x = document.getElementById("pig_s");
            x.play();
        } else {
            alert("wrong selection");
        }
    } else {
        alert("no");
    }

}

<div style="margin-left:230px;">
    <br>
    <br>
<img onmousedown="dog.play()" height="142" width="142" src="image/cow.jpg" alt="Cow" data-value="cow" onclick="selectImage(event)" />
 <img  height="142" width="142" src="image/dog.jpg" alt=""  data-value="dog" onclick="selectImage(event)"/> 
  <img height="142" width="142" src="image/horse.jpg" alt="" data-value="horse" onclick="selectImage(event)"/>  
    <img height="142" width="142"  src="image/pig.jpg" data-value="pig" onclick="selectImage(event)"/>
</div>
    <br>
    <br>
    <br>
    
    <div style="margin-left:400px;">
     <button type="button" onclick="selectName(event)" value="pig" id="pig_t">Cochon</button>
     <button type="button" onclick="selectName(event)" value="cow" id="cow_t">Vache</button>
     <button type="button" onclick="selectName(event)" value="horse" id="horse_t">Cheval</button>
     <button type="button" onclick="selectName(event)" value="dog" id="dog_t">chien</button>
    </div>

Answer 1

只需将动物的名称添加到该函数中（事实上，您似乎已经这样做了，因为您将事件传递给selectName，但我在您的代码中没有看到此函数）：

function image_select_animal(prefix) {
  var pic = document.getElementById(prefix).value;
  var text = document.getElementById(prefix + "_t").value;

  if (document.getElementById(prefix).checked) {
    if (pic == text) {
      var x = document.getElementById(prefix + "_s");
      x.play();
    } else {
      alert("wrong selection");
    }
  } else {
    alert("no");
  }
}

并在onclick中，为其他动物调用image_select_animal("pig")或等效物。

Answer 2

function image_select(name) {
    var el = document.getElementById(name); // create this variable, as you use this element twice. Less DOM lookups.
    var pic = el.value; // get the value of the `el` variable
    var text = document.getElementById(name + '_t').value;

    if (!el.checked) { // if not check
        alert('no');
        return; // return ends the function immediately, meaning the following lines are not read
    }

    if (pic != text) {
        alert('wrong selection');
        return; // return ends the function immediately, meaning the following lines are not read
    }

    document.getElementById(name + '_s').play(); // no need to store this in variable x, as you only use this element once.
}

如何缩短这个javascript代码？

2 个答案: