使用Javascript创建虚拟交互对象

Creating a Virtual Interactive Object with Javascript

本文关键字：交互 对象 虚拟 创建 Javascript 使用      更新时间：2023-09-26

我正在开发一个网页，其中有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就成功了。

相关文章：