0
我有多個div。如果用戶點擊其中一個，那麼它應該開始閃爍幾秒鐘，然後返回到其正常狀態。JavaScript - 讓多個元素閃爍異步
他們都應該完全獨立工作，意味着多個div應該能夠同時閃爍。
如果只涉及一個div，很容易解決這個問題。但如果多於一個div被點擊，那麼只有一個閃爍，另一個停止...
所以我認爲這將工作，如果我編碼它面向對象，但它仍然失敗，我不能解釋爲什麼。
這是我的代碼到目前爲止，它可能太複雜，但我需要知道爲什麼它不起作用，即使我已經使用了對象。
var OAHelper = new ObjectArrayHelper();
var taskList = new Array();
$(".blinkDivs").click(function() {
\t
var ElementID = $(this).attr("id");
//ElementID is NOT in array
if (!OAHelper.checkIfObjectExists(taskList, "id", ElementID)) {
var task = new Task(ElementID);
var newTask = { id: ElementID, task: task};
taskList.push(newTask);
\t \t var t = OAHelper.getValue(taskList, "task", "id", ElementID);
\t \t if (t !== false) {
\t \t \t t.blink();
\t \t }
\t }
});
function Task(ElementID)
{
var self = this;
this.id = ElementID;
this.interval = null;
this.limiter = 0;
this.toggle = 0;
\t this.blink = function()
\t {
$jqElement = $("#" + self.id);
self.limiter = 0;
self.interval = setInterval(function() {
if (self.toggle == 0) {
$jqElement.css("background-color", "blue");
self.toggle = 1;
} else {
$jqElement.css("background-color", "white");
self.toggle = 0;
}
if (self.limiter > 4) {
OAHelper.deleteObject(taskList, "id", self.id);
clearInterval(self.interval);
}
self.limiter++;
}, 400);
\t }
}
/**
* This class provides helper functions to do operations on object arrays
*
* functions:
*
* delete objects,
* output objects,
* change value of specific key,
* check if specific object exists,
* check if specific object has specific key value pair
*
* Autor: Eduard Fekete
* @constructor
*/
function ObjectArrayHelper()
{
/**
* Runs through all objects of an object array and searches for a record with specific identity.
*
* Return Values:
* \t \t true \t if record exists
* \t \t false \t if record does not exist
*
* Autor: Eduard Fekete
*
* @param pObjectArray \t \t \t Array of objects
* @param pIdentifier \t \t \t Identifier Key of the object
* @param pIdentifierValue \t \t Searched Identifier Value
* @returns {boolean}
*/
this.checkIfObjectExists = function(pObjectArray, pIdentifier, pIdentifierValue) {
for (var i in pObjectArray) {
for (var key in pObjectArray[i]) {
if (key == pIdentifier) {
if (pIdentifierValue == pObjectArray[i][key]) {
return true;
}
}
}
}
return false;
},
\t /**
\t * Runs through all objects of an object array and searches for a record with specific identity
\t * and checks if a specific key has a specific value.
\t *
\t * Return Values:
\t * \t \t true \t if the value was found in the record,
\t * \t \t false \t if not.
\t *
\t * Example:
\t * var worker = new Array(
\t * { id: 1, status: "working" },
\t * { id: 2, status: "done" }
\t *);
\t *
\t * checkKeyValueInObjectArray(worker, status, "done", "id", 1); \t \t //returns: false
\t * checkKeyValueInObjectArray(worker, status, "done", "id", 2); \t \t //returns: true
\t *
\t * Autor: Eduard Fekete
\t *
\t * @param array pObjectArray \t Array of objects
\t * @param string pSearchKey \t \t Key to search for in the objects
\t * @param pCheckValue \t \t \t The value you are searching
\t * @param string pIdentifier \t Identifier Key of the object
\t * @param pIdentifierValue \t \t Searched Identifier Value
\t * @returns {boolean}
\t */
\t this.checkKeyValue = function(pObjectArray, pSearchKey, pCheckValue, pIdentifier, pIdentifierValue)
\t {
\t \t for(var i in pObjectArray) {
\t \t \t for (var key in pObjectArray[i]) {
\t \t \t \t if (key == pSearchKey) {
\t \t \t \t \t if (pObjectArray[i][key] == pCheckValue) {
\t \t \t \t \t \t if (pObjectArray[i][pIdentifier] == pIdentifierValue) {
\t \t \t \t \t \t \t return true;
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t }
\t \t return false;
\t },
\t /**
\t * Runs through all objects of an object array, searches for a record with specific identity
\t * and sets the target key to the target value.
\t *
\t * Return Values:
\t * \t \t true \t if the value was set
\t * \t \t false \t if the object was not found
\t *
\t * Autor: Eduard Fekete
\t *
\t * @param pObjectArray \t \t \t Array of objects
\t * @param pTargetKey
\t * @param pTargetValue
\t * @param pIdentifier \t \t \t Identifier Key of the object
\t * @param pIdentifierValue \t \t Searched Identifier Value
\t * @returns {boolean}
\t */
\t this.setValue = function(pObjectArray, pTargetKey, pTargetValue, pIdentifier, pIdentifierValue)
\t {
\t \t for(var i in pObjectArray) {
\t \t \t if (pObjectArray[i][pIdentifier] == pIdentifierValue) {
\t \t \t \t pObjectArray[i][pTargetKey] = pTargetValue;
\t \t \t \t return true;
\t \t \t }
\t \t }
\t \t return false;
\t },
\t /**
\t * Runs through all objects of an object array, searches for a record with specific identity
\t * and returns the target value.
\t *
\t * Return Values:
\t * \t \t true \t if get value was successful
\t * \t \t false \t if the object was not found
\t *
\t * Autor: Eduard Fekete
\t *
\t * @param pObjectArray \t \t \t Array of objects
\t * @param pTargetKey \t \t \t The target key
\t * @param pIdentifier \t \t \t Identifier Key of the object
\t * @param pIdentifierValue \t \t Searched Identifier Value
\t * @returns {boolean}
\t */
this.getValue = function(pObjectArray, pTargetKey, pIdentifier, pIdentifierValue)
{
for(var i in pObjectArray) {
if (pObjectArray[i][pIdentifier] == pIdentifierValue) {
return pObjectArray[i][pTargetKey];
}
}
return false;
}
\t /**
\t * Runs through all objects of an object array, searches for a record with specific identity
\t * and deletes it.
\t *
\t * Return Values:
\t * \t \t true \t if the record was deleted successfully
\t * \t \t false \t if the record was not found
\t *
\t * Autor: Eduard Fekete
\t *
\t * @param pObjectArray \t \t \t Array of objects
\t * @param pIdentifier \t \t \t Identifier Key of the object
\t * @param pIdentifierValue \t \t Searched Identifier Value
\t * @returns {boolean}
\t */
\t this.deleteObject = function(pObjectArray, pIdentifier, pIdentifierValue)
\t {
\t \t for (var i in pObjectArray) {
\t \t \t for (var key in pObjectArray[i]) {
\t \t \t \t if (key == pIdentifier) {
\t \t \t \t \t if (pIdentifierValue == pObjectArray[i][key]) {
\t \t \t \t \t \t if (i > -1) {
\t \t \t \t \t \t \t pObjectArray.splice(i, 1);
\t \t \t \t \t \t \t return true;
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t }
\t \t return false;
\t },
\t /**
\t * Print every object of the object array and show it on the element with ID pOutputID
\t */
\t this.showObjects = function outputArray(pObjectArray, pOutputID)
{
var output = "";
for(var i in pObjectArray) {
output += "<ul>";
for (var key in pObjectArray[i]) {
output += "<li>" + key + ": " + pObjectArray[i][key] + "</li>";
}
output += "</ul>";
}
output += "<hr>";
$("#"+pOutputID).html(output);
}
}.blinkDivs {
background-color: white;
border: 3px solid black;
border-radius: 40px;
height: 50px;
width: 50px;
margin-bottom: 1px;
}
.blinkDivs:hover {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_01" class="blinkDivs"></div>
<div id="div_02" class="blinkDivs"></div>
<div id="div_03" class="blinkDivs"></div>首先點擊只在一個圓圈，請注意，閃爍2秒鐘，然後停止。然後點擊所有的圈子，並注意到其他間隔正在中斷並停止閃爍。
我假設你想在JavaScript中做到這一點，否則，你可以創建一個循環動畫類，點擊時添加一個循環動畫，並在無數秒後刪除。 – George
在JavaScript中是。我試圖理解如何用對象來解決這個問題。 – Black
Fari夠了，我覺得用CSS自己做起來會很有趣，所以如果你想要https://jsbin.com/tuhacepira/edit?html,css,js,output – George