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