JQuery无法识别类
JQuery not recognizing class
这里有这段代码。
$(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
。
相关文章:
- 使用jQuery+Javascript识别一个空文本节点
- jQuery选择器不识别任何动态创建的HTML输入函数
- jQuery选择器错误:无法识别的表达式
- 无法识别jQuery表达式
- jquery 1.8.0语法错误,无法识别的表达式:>
- JQuery无法识别的表达式[href=#undefined]
- 无法识别JQuery单击事件
- Javascript 无法识别 jQuery 函数
- 自动识别jQuery函数中的缓动参数
- 无法识别 JQuery 自定义插件函数
- IE 7 和 8 无法识别 jQuery 的高度和宽度
- Jquery:识别Jquery滑块上的多个句柄
- 无法识别jquery effect()函数
- 无法识别jQuery悬停事件
- 识别jquery中的日期格式,并在jquery日期选择器中将其设置为默认格式
- 从包中移出依赖项后,Angular无法识别jQuery.将Json转换为Json
- 识别jquery或javascript中是否选中复选框
- 如何让IE识别jquery中的这个变化
- Firefox不能识别Jquery的全宽多边形
- 一些与Dreamweaver模板(.dwt)相关的HTML文件不识别jquery/javascript