使用Javascript创建一个虚拟的交互对象

我正在一个网页上，我有5个按钮，当点击时，使对象响应。现在，我只是使用了切换类选项，但我确信有更好的方法，因为我很难解决错误。使用Javascript创建一个虚拟的交互对象

问题：

当你通过，并按下多个按钮，有时它不会删除当前的类其上。例如，告诉对象去睡觉，然后按另一个按钮，它不会工作，除非你点击按钮两次。
如何设置超时功能以使对象在一段时间后恢复正常？

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"); 
    }); 
});

来源

2014-09-22 mediaquery

请在问题中包含代码的相关部分。 – 2014-09-22 23:07:24

请试试这个代码：

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

来源

2014-09-22 23:23:31 Tengiz

感谢您的努力，但没有奏效。当按钮被点击时，对象完全消失。 – mediaquery 2014-09-22 23:26:13

@angelaR应该现在工作，请检查 – Tengiz 2014-09-22 23:31:14

哦，我明白我在做什么错了！谢谢，你做这件事的方式更有意义。 – mediaquery 2014-09-22 23:33:54

jsBin demo

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的伎俩。

来源

2014-09-22 23:29:17

谢谢你的帮助！ – mediaquery 2014-09-22 23:36:04

@angelaR欢迎您！ – 2014-09-22 23:37:55

每次你点击一个按钮，你的代码就会切换一个类。这些类互相重叠，并且toggleclass将它们按字母顺序排列。所以这意味着第五个将总是覆盖前面的那个，第四个将总是覆盖前面的三个而不是第五个等，所以它创建了一组规则，而不是错误。

实质上，您通过添加多个类来给猫添加多个行为。如果你希望一次只执行一个，我建议删除所有类并只添加你推送的类。另外，使用不同的代码结构可能更有效率：

$(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，而不是将其作为默认行为。

来源

2014-09-22 23:32:50 user3538063

使用Javascript创建一个虚拟的交互对象

回答

相关问题