Question

我是JavaScript的初学者，我正在努力为之前在Meetup学习的预编码练习添加一些功能。这是一个虚拟宠物＆＃34;能够被给予对待，玩耍或锻炼。每次单击这些按钮都会触发其重量或快乐的增加或减少。当这些中的任何一个达到0时，会发出警报，称宠物太瘦或太不开心......但我仍然可以增加其他条件。作为一个非常缺乏经验的人，最简单的方法是确保如果体重或幸福达到0，它会抛出警报并阻止你单击＆＃34;好的＆＃34;并继续增加另一个？

以下是我在CodePen中所做的工作： https://codepen.io/HeyOliveHey/pen/wmGmRj

var pet_info = {
name: "Poodle",
weight: 45,
happiness: 4
}

$(function() {

  // Called function to update the name, happiness, and weight of our pet in our HTML
  checkAndUpdatePetInfoInHtml();

  // When each button is clicked, it will "call" function for that button (functions are below)
  $('.treat-button').click(clickedTreatButton);
  $('.play-button').click(clickedPlayButton);
  $('.exercise-button').click(clickedExerciseButton);

})

  // Add a variable "pet_info" equal to a dictionary with the name (string), weight (number), and happiness (number) of your pet

  function clickedTreatButton() {
    pet_info.happiness = pet_info.happiness += 1;
    // Increase pet happiness
    pet_info.weight = pet_info.weight += 1;
    // Increase pet weight
    checkAndUpdatePetInfoInHtml();
  }

  function clickedPlayButton() {
        pet_info.happiness += 1;
        pet_info.weight -=1;

    // Increase pet happiness
    // Decrease pet weight
    checkAndUpdatePetInfoInHtml();
  }

  function clickedExerciseButton() {
    pet_info.happiness -=1;
    pet_info.weight -=1;
    // Decrease pet happiness
    // Decrease pet weight
    checkAndUpdatePetInfoInHtml();
  }

  function checkAndUpdatePetInfoInHtml() {
    checkWeightAndHappinessBeforeUpdating();  
    updatePetInfoInHtml();
  }

  function checkWeightAndHappinessBeforeUpdating() {
    if (pet_info.weight < 0) {
        pet_info.weight = 0;   
          alert("Your dog is too skinny, feed it now.")
    }
    if (pet_info.happiness < 0) {
        pet_info.happiness = 0;
          alert("Your dog isn't happy, play with it or give it a treat.")
    }
    // Add conditional so if weight is lower than zero, set it back to zero
  }

  // Updates your HTML with the current values in your pet_info dictionary
  function updatePetInfoInHtml() {
    $('.name').text(pet_info['name']);
    $('.weight').text(pet_info['weight']);
    $('.happiness').text(pet_info['happiness']);
  }

Answer 1

您可以让checkWeightAndHappinessBeforeUpdating()函数返回一个值。所以：

function checkWeightAndHappinessBeforeUpdating() {
    var valid = true;
    if (pet_info.weight < 0) {
        valid = false;
        pet_info.weight = 0;   
          alert("Your dog is too skinny, feed it now.")
    }
    if (pet_info.happiness < 0) {
        valid = false;
        pet_info.happiness = 0;
          alert("Your dog isn't happy, play with it or give it a treat.")
    }
    return valid;
}

然后您可以根据返回值做出决定。所以在checkAndUpdatePetInfoInHtml：

function checkAndUpdatePetInfoInHtml() {
    if (checkWeightAndHappinessBeforeUpdating()) {
        updatePetInfoInHtml();
    }
}

Answer 2

您可以使用jQuery根据条件设置相关按钮。

"vue": "^2.4.2",
"vue-cookie": "^1.1.4",
"vue-flatpickr": "^2.3.0",
"vue-js-toggle-button": "^1.1.2",
"vue-loader": "^11.3.4",
"vue-resource": "^1.0.3",
"vue-select": "^2.2.0",
"vue-slider-component": "^2.3.6",
"vue-star-rating": "^1.4.0",
"vue-template-compiler": "^2.4.2",
"vue2-dropzone": "^2.2.7",
"vuedraggable": "^2.15.0",
"vuejs-paginate": "^1.1.0",
"vuex": "^2.2.1",

因此，在您发出禁用相应按钮的警报后，您会立即放置与此类似的行，然后您还需要在条件正确时将其设置为启用。

如果调用警报，如何停止功能？

2 个答案: