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 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就可以了。

Answer 3

每次单击按钮时，代码都会切换一个类。这些类相互重叠，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，如果这是您的默认行为。

使用Javascript创建虚拟交互式对象

3 个答案: