JQuery无法识别类

JQuery not recognizing class

本文关键字:识别 JQuery      更新时间:2023-09-26

这里有这段代码。

$(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);
    }
  });
});
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;
}
<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>

这是我正在开发的一款游戏,我目前正在开发的游戏是装备系统。它的工作原理基本上很好,你可以在设备字段集中点击物品,把它们从自己身上拿走,然后它们就会进入你的库存,除非库存已经满了。问题是试图把它们放回去,你应该可以通过点击库存或"口袋"中的设备来做到这一点,我已经做了一些测试,我相信问题出在

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

我认为问题是JQuery没有识别出库存中的项目有"item"类,尽管如果你注意到在addToInventory()函数中我专门给它指定了"item)类,这会让我感到困惑。有什么帮助吗?

运行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