Question

我是JS和Jquery的初学者，无法找到解决我的任务的方法。

我的目标是 - 只要点击了class ='add-gold'的按钮，我就想用class ='gold-vault'添加20到span。当class ='spend-gold'的按钮点击时，从同一范围中减去20

<html>
    <head></head>
    <body>
      <button class='add-gold'> Add Gold</button>
      <button class='spend-gold'> Spend Gold</button>
      <span class='gold-storage'>0</span>
    </body>
    </html>

Answer 1

你可以试试这个：

var $span = $(".gold-storage");

$(".add-gold").on("click", function() {
  var current = parseInt($span.html());
  
  $span.html(current + 20);
});

$(".spend-gold").on("click", function() {
  var current = parseInt($span.html());
  
  $span.html(current - 20);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head></head>
    <body>
      <button class='add-gold'> Add Gold</button>
      <button class='spend-gold'> Spend Gold</button>
      <span class='gold-storage'>0</span>
    </body>
    </html>

编辑：

如果你想保留你的金币（最小金币= 0），请$span.html(current - 20);改变if (current > 0) { $span.html(current - 20); }，这样如果金不是，你就不会删除黄金。 0（要删除的最小金币是20）
如果您想制作一个触发事件：您可以执行$(".add-gold").on("click", function() { ... }和$(".spend-gold").on("click", function() { ... }而不是$("button").on("click", function() { ... }并知道是否需要添加或删除黄金，请检查按钮类： if ($(this).hasClass('add-gold'))（返回true或false，使用$（this）您单击的按钮）。

这是你在找什么？

Answer 2

添加了支票，因此您无法获得负金币

.textContent

var xmlString = 
`
<aryNotice><Notice>
  <PlanStartDate>3/20/2017 11:28:01 AM</PlanStartDate>
  <PlanEndDate />
  <Location>UK / City</Location>
  <SevLevel>YELLOW</SevLevel>
  <SrvLev123>Web Services</SrvLev123>
  <WebTitle />
  <Weblink /></Notice>
</aryNotice>
`;

var newXML = "";
var parser = null, xmlDoc = null;

// Create XML DOM Document correctly for the browser being used:
if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(xmlString, "text/xml");
} else {
  // Internet Explorer
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(xmlString);
}

// Now, use the XML DOM API from the XML Document:
var start = xmlDoc.querySelector("PlanStartDate");
var end = xmlDoc.querySelector("PlanEndDate");

// Rest of code is as normal:
if(start.textContent) {
  newXML += 'Planned Dates: ' + start.textContent; 
}

if(end.textContent) {
  newXML += ' - ' + end.textContent;
} else { 
  newXML += ' - No end date ';
}

console.log(newXML);

Answer 3

以下是您问题的解决方案。

＆＃13;

$('.add-gold').click(function(){
    var currentstock = parseInt($('.gold-storage').text());
    $('.gold-storage').text(currentstock + 20);
});

$('.spend-gold').click(function(){
    var currentstock = parseInt($('.gold-storage').text());
    $('.gold-storage').text(currentstock - 20);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head></head>
    <body>
      <button class='add-gold'> Add Gold</button>
      <button class='spend-gold'> Spend Gold</button>
      <span class='gold-storage'>0</span>
    </body>
    </html>

＆＃13;

Answer 4

下面。我没有使用jQuery，因为我不知道你是否可以使用它。

此外，即使跨度为空，这也会发生变化，并且您永远不会获得黄金的负值

＆＃13;

window.onload = function() {
  var gold = document.querySelector('.gold-storage');

  function changeGold(quantity) {
    var current = parseInt(gold.textContent);
    var newGold = isNaN(current) ? quantity : current + quantity;
    if (newGold < 0) {
      newGold = 0;
    }
    gold.innerHTML = newGold;
  }

  document.querySelector('.add-gold').addEventListener('click', function() {
    changeGold(20)
  });

  document.querySelector('.spend-gold').addEventListener('click', function() {
    changeGold(-20)
  });
}

＆＃13;

<html>
    <head></head>
    <body>
      <button class='add-gold'> Add Gold</button>
      <button class='spend-gold'> Spend Gold</button>
      <span class='gold-storage'>0</span>
    </body>
    </html>

＆＃13;

Answer 5

首先，您可以将范围文本转换为数字，以便可以向/从中添加/减去数字。

然后您使用条件来查看单击了哪个按钮，以便您知道是否添加或删除。

希望有所帮助

＆＃13;

let button = $("button")


button.on("click", function() {
  let number = parseInt($(".gold-storage").text(), 10);
  if ($(this).hasClass("add-gold")) {

    $(".gold-storage").text(number + 20);
  }
  if ($(this).hasClass("spend-gold")) {
    $(".gold-storage").text(number - 20);

  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='add-gold'> Add Gold</button>
<button class='spend-gold'> Spend Gold</button>
<span class='gold-storage'>0</span>

＆＃13;

如何将值加总到

5 个答案: