2014-10-29 88 views
2

这里我有这段代码。JQuery不识别类

$(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'类,这让我感到困惑。任何帮助?

回答

2

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

使用委托连接到非改变的祖先元素事件处理程序:

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

document是默认的,如果没有别的更接近。

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

注意:绝对不要使用'body'来委托鼠标事件,因为样式会导致0高度,从而停止事件冒泡。如果没有其他方便的话,请使用document