Question

这里我有这段代码。

＆＃13;

$(document).ready(function(){
  //Variables
  var inventory = {storage:'pocket',stuff:0,space:5};
  var equip = {
    head:'',
    chest:'torn shirt',
    arms:'',
    wrists:'watch',
    hands:'',
    legs:'torn jeans',
    ankles:'',
    feet:''
  };
  var equipNames = [
    'torn shirt',
    'torn jeans',
    'watch',
    'boots'
  ];
  var equipPlaces = {
    torn_shirt:'chest',
    watch:'wrists',
    torn_jeans:'legs',
    boots:'feet'
  }
  
  //Setup
  addToInventory('boots',1);

  //Intervals
  setInterval(function(){
    //Text
    $('#inventoryTitle').text(inventory.storage+'-'+inventory.stuff+'/'+inventory.space);
    
    $('#equipHead').text(equip.head);
    $('#equipChest').text(equip.chest);
    $('#equipArms').text(equip.arms);
    $('#equipWrists').text(equip.wrists);
    $('#equipHands').text(equip.hands);
    $('#equipLegs').text(equip.legs);
    $('#equipAnkles').text(equip.ankles);
    $('#equipFeet').text(equip.feet);
  },1);
  
  //Functions
  function addToInventory(name,amount){
    for(var i=0;i<amount;i++){
      if(inventory.stuff>=inventory.space) return;
      $('<tr>').text(name).appendTo($('#inventory')).addClass('item');
      inventory.stuff++;
    }
  }
  function takeOff(name){
    if(equip.head==name) equip.head='';
    if(equip.chest==name) equip.chest='';
    if(equip.arms==name) equip.arms='';
    if(equip.wrists==name) equip.wrists='';
    if(equip.hands==name) equip.hands='';
    if(equip.legs==name) equip.legs='';
    if(equip.ankles==name) equip.ankles='';
    if(equip.feet==name) equip.feet='';
  }
  function isEquip(name){
    for(var i=0;i<equipNames.length;i++){
      if(name==equipNames[i]) return true;
    }
    return false;
  }
  function equip(name){
    var name2 = name
    name.replace(/ /g,'_');
    alert(name);
    equip[equipPlaces[name2]]=name;
  }
  function removeFromInventory(name){
    
  }
  
  //Triggers
  $('.equip').click(function(){
    var e = $(this).text();
    if(e!=''){
      if(inventory.stuff<inventory.space){
        takeOff(e);
        addToInventory(e,1);
      }
    }
  });
  $('.item').on('click', function(){
    var i = $(this).text();
    alert(i);
    if(isEquip(i)){
      alert(i);
      equip(i);
    }
  });
});

＆＃13;

html, body, button {
  background-color:black;
  color:lime;
  font-family:monospace;
  text-transform:uppercase;
}
header {text-align:center;}
fieldset {border:1px solid lime;}
td, button {border:1px solid lime;text-align:center;}
html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>survivor</header>
 
<fieldset style='float:right;'>
  <legend id='inventoryTitle'>storage - stuff / space</legend>
  <table id='inventory'></table>
</fieldset>

<fieldset style='float:right;'>
  <legend>Equipment</legend>
  <table>
    <tr><td>Head</td><td id='equipHead' class='equip'></td></tr>
    <tr><td>chest</td><td id='equipChest' class='equip'></td></tr>
    <tr><td>arms</td><td id='equipArms' class='equip'></td></tr>
    <tr><td>wrists</td><td id='equipWrists' class='equip'></td></tr>
    <tr><td>hands</td><td id='equipHands' class='equip'></td></tr>
    <tr><td>legs</td><td id='equipLegs' class='equip'</td></tr>
    <tr><td>ankles</td><td id='equipAnkles' class='equip'></td></tr>
    <tr><td>feet</td><td id='equipFeet' class='equip'></td></tr>
  </table>
</fieldset>

＆＃13;

这是我正在研究的游戏，我正在研究的游戏的当前方面是设备系统。它工作得非常好，您可以通过在设备字段集中单击它们来取出物品，然后它们会进入您的库存，除非它已满。问题是试图将它们重新打开，您应该可以通过点击清单中的设备或“口袋”来完成此操作，我已经做了一些测试，我相信问题出在

$('.item').on('click', function(){
var i = $(this).text();
alert(i);
if(isEquip(i)){
  alert(i);
  equip(i);
}});

我认为问题是JQuery没有认识到清单中的项目包含“＆＃39;项目”。虽然如果你在addToInventory（）函数中注意到，我特意给它一个＆＃39;项目＆＃39;上课，这让我很困惑。有什么帮助吗？

Answer 1

您运行jQuery选择器并绑定事件处理程序时，class="item"元素不存在。

使用附加到不变的祖先元素的委托事件处理程序：

$(document).on('click', '.item', function(){
    var i = $(this).text();
    alert(i);
    if(isEquip(i)){
      alert(i);
      equip(i);
    }
});

document是默认值，如果没有其他更近的话。

它通过监听事件（在这种情况下为click）冒泡到单击的元素的祖先，然后在事件时应用jQuery选择器。然后将函数应用于导致事件的任何匹配元素。即使在注册事件后添加元素，也允许元素匹配。

注意：永远不要将'body'用于委派鼠标事件，因为样式可能会导致0高度，从而阻止事件冒泡。如果没有其他方便的话，请使用document。

JQuery没有识别类

1 个答案: