0
複数のdivがあります。ユーザーがそのうちの1つをクリックすると、数秒間点滅し始めてから通常の状態に戻ります。JavaScript - 複数の要素を非同期に点滅させます
これらはすべて完全に独立して動作するはずです。つまり、複数のdivが同時に点滅できるはずです。
1つのdivだけが含まれている場合、これを解決するのは非常に簡単です。しかし、複数のdivがクリックされた場合、1つだけが点滅し、もう1つが停止します。
オブジェクト指向をコード化すればうまくいくと思いますが、それでも失敗し、理由を説明できません。
これはこれまでのコードですが、複雑すぎるかもしれませんが、オブジェクトを使用したにもかかわらず動作しない理由を知る必要があります。
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>まずクリックだけで1円で、それが2秒間点滅し、停止していることがわかりJSFIDDLE
。すべての円をクリックし、他の間隔が中断して点滅が止まったことに気づく。
私はそう、あなたがクリックするだけで追加取得し、しかし何秒後に除去されるループアニメーションを持つクラスを作成することができ、あなたはJavaScriptでこれを実行したいと仮定しています。 – George
はい、JavaScriptです。私はオブジェクトでこれを解決する方法を理解しようとします。 – Black
Fari十分に、私はCSSでそれを自分自身で行うのはかなり楽しいと思ったので、もしそれがほしいと思えば、https://jsbin.com/tuhacepira/edit?html,css,js,output – George