Question

我有多个div。如果用户点击其中一个，那么它应该开始闪烁几秒钟，然后返回正常状态。

它们应该完全独立工作，意味着多个div应该能够同时闪烁。

如果只涉及一个div，则很容易解决这个问题。但如果点击了多个div，那么只有一个div闪烁而另一个停止...

所以我认为如果我将它编码为面向对象的话会起作用，但它仍然失败，我无法解释原因。

到目前为止，这是我的代码，它可能过于复杂，但我需要知道为什么即使我使用了对象它也不起作用。

var OAHelper = new ObjectArrayHelper();

var taskList = new Array();

$(".blinkDivs").click(function() {
	
    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);

		var t = OAHelper.getValue(taskList, "task", "id", ElementID);

		if (t !== false) {
			t.blink();
		}
	}
});



function Task(ElementID)
{
    var self = this;
    this.id = ElementID;
    this.interval = null;
    this.limiter = 0;
    this.toggle = 0;
	this.blink = function()
	{
        $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);
	}
}



/**
 * 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:
     * 		true	if record exists
     * 		false	if record does not exist
     *
     * Autor: Eduard Fekete
     *
     * @param pObjectArray			Array of objects
     * @param pIdentifier			Identifier Key of the object
     * @param pIdentifierValue		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;
    },

	/**
	 * Runs through all objects of an object array and searches for a record with specific identity
	 * and checks if a specific key has a specific value.
	 *
	 * Return Values:
	 * 		true 	if the value was found in the record,
	 * 		false 	if not.
	 *
	 * Example:
	 * var worker = new Array(
	 *   { id: 1, status: "working" },
	 *   { id: 2, status: "done" }
	 * );
	 *
	 * checkKeyValueInObjectArray(worker, status, "done", "id", 1);		//returns: false
	 * checkKeyValueInObjectArray(worker, status, "done", "id", 2);		//returns: true
	 *
	 * Autor: Eduard Fekete
	 *
	 * @param array pObjectArray	Array of objects
	 * @param string pSearchKey		Key to search for in the objects
	 * @param pCheckValue			The value you are searching
	 * @param string pIdentifier	Identifier Key of the object
	 * @param pIdentifierValue		Searched Identifier Value
	 * @returns {boolean}
	 */
	this.checkKeyValue = function(pObjectArray, pSearchKey, pCheckValue, pIdentifier, pIdentifierValue)
	{
		for(var i in pObjectArray) {
			for (var key in pObjectArray[i]) {

				if (key == pSearchKey) {

					if (pObjectArray[i][key] == pCheckValue) {
						if (pObjectArray[i][pIdentifier] == pIdentifierValue) {
							return true;
						}
					}
				}
			}
		}
		return false;
	},
	/**
	 * Runs through all objects of an object array, searches for a record with specific identity
	 * and sets the target key to the target value.
	 *
	 * Return Values:
	 * 		true 	if the value was set
	 * 		false	if the object was not found
	 *
	 * Autor: Eduard Fekete
	 *
	 * @param pObjectArray			Array of objects
	 * @param pTargetKey
	 * @param pTargetValue
	 * @param pIdentifier			Identifier Key of the object
	 * @param pIdentifierValue		Searched Identifier Value
	 * @returns {boolean}
	 */
	this.setValue = function(pObjectArray, pTargetKey, pTargetValue, pIdentifier, pIdentifierValue)
	{
		for(var i in pObjectArray) {
			if (pObjectArray[i][pIdentifier] == pIdentifierValue) {
				pObjectArray[i][pTargetKey] = pTargetValue;
				return true;
			}
		}
		return false;
	},
	/**
	 * Runs through all objects of an object array, searches for a record with specific identity
	 * and returns the target value.
	 *
	 * Return Values:
	 * 		true 	if get value was successful
	 * 		false	if the object was not found
	 *
	 * Autor: Eduard Fekete
	 *
	 * @param pObjectArray			Array of objects
	 * @param pTargetKey			The target key
	 * @param pIdentifier			Identifier Key of the object
	 * @param pIdentifierValue		Searched Identifier Value
	 * @returns {boolean}
	 */
    this.getValue = function(pObjectArray, pTargetKey, pIdentifier, pIdentifierValue)
    {
        for(var i in pObjectArray) {
            if (pObjectArray[i][pIdentifier] == pIdentifierValue) {
                return pObjectArray[i][pTargetKey];
            }
        }
        return false;
    }
	/**
	 * Runs through all objects of an object array, searches for a record with specific identity
	 * and deletes it.
	 *
	 * Return Values:
	 * 		true 	if the record was deleted successfully
	 * 		false	if the record was not found
	 *
	 * Autor: Eduard Fekete
	 *
	 * @param pObjectArray			Array of objects
	 * @param pIdentifier			Identifier Key of the object
	 * @param pIdentifierValue		Searched Identifier Value
	 * @returns {boolean}
	 */
	this.deleteObject = function(pObjectArray, pIdentifier, pIdentifierValue)
	{
		for (var i in pObjectArray) {
			for (var key in pObjectArray[i]) {
				if (key == pIdentifier) {
					if (pIdentifierValue == pObjectArray[i][key]) {
						if (i > -1) {
							pObjectArray.splice(i, 1);
							return true;
						}
					}
				}
			}
		}
		return false;
	},
	/**
	 *  Print every object of the object array and show it on the element with ID pOutputID
	 */
	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秒并停止。然后单击所有圆圈，注意其他间隔正在中断并停止闪烁。

Answer 1

$jqElement = $("#" + self.id);将$ jqElement公开给全局范围（window.$jqElement）。这就是每次调用blink时的原因，它将$ jqElement替换为新的。

将$ jqElement放入self（或简单地将var / let放在它前面）：

function Task(ElementID)
{
    var self = this;
    self.id = ElementID;
    self.interval = null;
    self.limiter = 0;
    self.toggle = 0;
    self.$jqElement = $("#" + self.id);
    self.blink = function()
    {
        self.limiter = 0;
        self.interval = setInterval(function() {

            if (self.toggle == 0) {
                self.$jqElement.css("background-color", "blue");
                self.toggle = 1;
            } else {
                self.$jqElement.css("background-color", "white");
                self.toggle = 0;
            }

            if (self.limiter > 4) {

                OAHelper.deleteObject(taskList, "id", self.id);
                clearInterval(self.interval);
            }
            self.limiter++;
        }, 400);
    }
}

https://jsfiddle.net/g128aunr/1/

使用工厂，Task变为createTask

//Call var task = createTask(elId); instead of new Task();
var createTask = function createTask(elementId) {
    var self = {
        id: elementId
      , interval: 0
      , limiter: 0
      , toggle: 0
      , $element: $jqElement = $("#" + elementId)
      , blink: function blink() {
            self.limiter = 0;
          self.interval = setInterval(function() {
                            if (self.toggle == 0) {
                self.$element.css("background-color", "blue");
                self.toggle = 1;
                } else {
                self.$element.css("background-color", "white");
                self.toggle = 0;
                }

            if (self.limiter > 4) {
                clearInterval(self.interval);
            }
            self.limiter++;
          }, 400);
        }
    };
    return self;
}

Answer 2

看看这是否对您有所帮助：

$(document).on("click", ".blinkDivs", function() {
  var el     = $(this),  
      newone = el.clone(true);
           
  el.before(newone);
  $(this).remove();
  
  $(newone).addClass("blinking");
})

.blinkDivs {
  background-color: white;
  border: 3px solid black;
  border-radius: 40px;
  height: 50px;
  width: 50px;
  margin-bottom: 1px;
}
.blinking {
  width: 50px;
  height: 50px;
  animation: myBlink 3s;
}

@-webkit-keyframes myBlink {
  0%, 25%, 50%, 75% {
    background-color: blue;
  }
  1%, 26%, 51%, 76% {
    background-color: white;
  }
}

<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>

Answer 3

用这个替换你的任务函数....

function Task(ElementID)
{
   var self = this;
   this.id = ElementID;
   this.interval = null;
   this.limiter = 0;
   this.toggle = 0;
   $(".blinkDivs").css("background-color", "white");
   this.blink = function()
   {
    $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);
}

}

JavaScript - 让多个元素异步闪烁

3 个答案: