Question

试图隐藏ID为lineID的动态生成的DIV，该ID是从aspx后端调用的，但是它不起作用。会调用该函数，但调用函数7时不会隐藏函数6中的行。

lineArea基本上是绘制线条的HTML正文。

画线的代码

//show line connecting 2 nodes
    function displayInst6Line() {
        var calcNode = new calculateLine();
        $('.lineArea').line(calcNode.displayInst6LineX, calcNode.displayInst6LineY, calcNode.displayInst6LineX2, calcNode.displayInst6LineY, { color: line_colour, stroke: 5, zindex: line_zindex });           
         $('#lineID').show();
    }

 //hide line
    function displayInst7Line() {     
        var calcNode = new calculateLine();
        $('.lineArea').line(calcNode.displayInst6LineX, calcNode.displayInst6LineY, calcNode.displayInst6LineX2, calcNode.displayInst6LineY, { color: '#868e96', stroke: 5, zindex: line_zindex });
        $('#lineID').hide();
    }

进行行计算的后端代码

        //math function to draw lines
    (function ($) {

        var helpers = {
            createLine: function (x1, y1, x2, y2, options) {

                // Check if browser is Internet Exploder ;)
                var isIE = navigator.userAgent.indexOf("MSIE") > -1;
                if (x2 < x1) {
                    var temp = x1;
                    x1 = x2;
                    x2 = temp;
                    temp = y1;
                    y1 = y2;
                    y2 = temp;
                }
                var line = document.createElement("div");
                line.id = "lineID";
                line.className = options.class;

                // Formula for the distance between two points
                // http://www.mathopenref.com/coorddist.html
                var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));

                line.style.width = length + "px";
                line.style.borderBottom = options.stroke + "px " + options.style;
                line.style.borderColor = options.color;
                line.style.position = "absolute";
                line.style.zIndex = options.zindex;

                if (isIE) {
                    line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
                    line.style.left = x1 + "px";
                    var nCos = (x2 - x1) / length;
                    var nSin = (y2 - y1) / length;
                    line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1 * nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
                } else {
                    var angle = Math.atan((y2 - y1) / (x2 - x1));
                    line.style.top = y1 + 0.5 * length * Math.sin(angle) + "px";
                    line.style.left = x1 - 0.5 * length * (1 - Math.cos(angle)) + "px";
                    line.style.transform = line.style.MozTransform = line.style.WebkitTransform = line.style.msTransform = line.style.OTransform = "rotate(" + angle + "rad)";
                }
                return line;
            }
        }


        $.fn.line = function (x1, y1, x2, y2, options, callbacks) {
            return $(this).each(function () {
                if ($.isFunction(options)) {
                    callback = options;
                    options = null;
                } else {
                    callback = callbacks;
                }
                options = $.extend({}, $.fn.line.defaults, options);

                $(this).append(helpers.createLine(x1, y1, x2, y2, options)).promise().done(function () {
                    if ($.isFunction(callback)) {
                        callback.call();
                    }
                });


            });
        };
        $.fn.line.defaults = {
            zindex: 10000,
            color: '#000000',
            stroke: "1",
            style: "solid",
            class: "line",
        };
    })(jQuery);

Answer 1

这告诉我们您通过多次调用helpers.createLine来复制ID。 具有相同ID的元素不能超过一个。 ID的全部目的是作为唯一标识符。

jQuery将$("#lineID")优化为$(document.getElementById("lineID"))（有效）为getElementById，而$("#lineID").hide();仅返回一个元素。通常，当您违反“您不能有多个具有相同ID的元素”规则时，这是具有ID的第一个ID。因此remove将隐藏具有该ID的 first 元素（即使它已经被隐藏）。

您需要为元素提供不同的ID，或以其他方式标识它们。或者，如果仅意味着其中一个，请使用hide而不是options.ResponseType = OpenIdConnectResponseType.Code来真正删除元素。

jQuery hide（）在动态生成的DIV上不起作用

1 个答案: