使用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創建一個虛擬的交互對象

回答

相關問題