使用Javascript创建虚拟交互对象

Question

我正在工作的网页，我有5个按钮，当点击，使对象响应。现在，我只是使用切换类选项，但我相信有一个更好的方法，因为我有困难，使错误解决。

问题：

• 当您通过并按下多个按钮时，有时它不会删除当前的类。例如，告诉对象进入睡眠，然后按另一个按钮，它将无法工作，除非您单击该按钮两次。
• 如何设置超时函数，使对象在一段时间后恢复正常？

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

Answer 1

请尝试以下代码：

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

Answer 2

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完成了任务。

Answer 3

每次单击按钮时，代码都会切换一个类。这些类相互覆盖，并按字母顺序排列它们。因此，这意味着第五个总是覆盖前面的规则，第四个总是覆盖前三个，而不是第五个等等，所以它创建了一组规则，而不是but。

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

$(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。