我正在开发一个网页,其中有5个按钮,单击后会使对象做出响应。现在,我只是使用了toggle类选项,但我相信有更好的方法,因为我很难解决bug。
问题:
-
当你浏览并按下多个按钮时,有时它不会删除当前打开的类。例如,告诉对象进入睡眠状态,然后按下另一个按钮,除非你点击两次按钮,否则它不会工作。
-
如何设置超时功能,使对象在一定时间后恢复正常?
HTML:
<div id="cat" class="catNormal"></div>
<div class="container">
<ul class="commands">
<li><input type="button" value="Look left, kitty!" id="catLeft"></li>
<li><input type="button" value="Look right, kitty!" id="catRight"></li>
<li><input type="button" value="Pet kitty!" id="catPurr"></li>
<li><input type="button" value="Go to sleep kitty!" id="catSleep"></li>
<li><input type="button" value="Good kitty!" id="catWag"></li>
</ul>
</div>
Javascript
// Set Kitty as object
var myKitty= {
getKitty: document.getElementById("#cat"),
}
// Make Kitty look left
$(document).ready(function() {
$("#catLeft").click(function() {
$(".catNormal").toggleClass("catLeft");
});
});
// Make Kitty look right
$(document).ready(function() {
$("#catRight").click(function() {
$(".catNormal").toggleClass("catRight");
});
});
// Pet the kitty
$(document).ready(function() {
$("#catPurr").click(function() {
$(".catNormal").toggleClass("catPurr");
});
});
// Make Kitty sleep
$(document).ready(function() {
$("#catSleep").click(function() {
$(".catNormal").toggleClass("catSleep");
});
});
// Make Kitty wag tail
$(document).ready(function() {
$("#catWag").click(function() {
$(".catNormal").toggleClass("catWag");
});
});
请尝试以下代码:
$(document).ready(function () {
var interval = null,
timeout = 1000;
var normalClass = 'catNormal';
var catButtons = ['catLeft', 'catRight', 'catPurr', 'catSleep', 'catWag'];
var catObj = $('#cat');
function resetTheCat() {
catObj.attr('class', normalClass);
clearInterval(interval);
}
for (var i = 0; i < catButtons.length; i++) {
$("#" + catButtons[i]).click((function (className) {
return function() {
resetTheCat();
catObj.toggleClass(className);
interval = setInterval(function() {
resetTheCat()
}, timeout);
}
})(catButtons[i]));
}
});
每次单击按钮时,代码都会切换一个类。这些类相互覆盖,toggleclass将它们按字母顺序排列。因此,这意味着第五个将始终覆盖前三个,第四个将始终重写前三个但不覆盖第五个等等,因此它创建了一组规则,而不是bug。
本质上,你通过添加多个类来赋予你的猫多种行为。如果您希望它一次只执行一个,我建议删除所有类,只添加您推送的类。此外,使用不同的代码结构可能更有效:
$(document).on({
click: function (event, ui) {
var element = $(event.target);
var element_id = element.attr('id');
if (element.attr('type') == 'input'){
$("#cat").removeClass(); // removeclass with no parameters removes all classes...
$("#cat").addClass("catNormal"); // Recommend removing this class altogether and simply applying the css to the ID....
$("#cat").addClass(element_id); // Since your button IDs match your classes you wish to add, we can get away with this here.
}
}
});
以上代码就是您所需要的全部内容。它是一个点击处理程序,处理页面上发生的任何"输入"项事件。它获取项目的ID,去掉所有类的"#cat"元素,并将"catNormal"类加上按钮的ID重新添加为一个类。但是,您应该删除"catNormal"类,如果这是您的默认行为,则只需将css应用于ID即可。
jsBin演示
var $cat = $('#cat');
$('.commands :button').click(function() {
$cat.removeClass().addClass(this.id); // Same class as the clicked ID btn.
setTimeout(function(){ // Reset to normal after 1000ms.
$cat.removeClass().addClass('catNormal');
}, 1000);
});
上面的好处是,您已经将类似的ID
指定为所需的情绪classes
,因此针对所需的类this.id
就成功了。