Das Javascript-Array speichert Werte zweimal, wenn der Menüeditor zum ersten Mal ausgeführt wird ⇐ JavaScript

[Anonymous]

Ich habe ein untergeordnetes Bedienfeld auf der Seite in einem Iframe geöffnet, aber mir ist aufgefallen, dass mein Funktionsaufruf zweimal aufgerufen wurde, und ich habe gelesen, dass dies beim Laden von Iframes passieren kann. Jetzt lade ich das Panel in ein Div auf derselben Seite, aber das Array, das initialisiert wird, enthält immer noch zwei Werte. Ich kann sehen, dass die Funktion einmal aufgerufen wird, aber das Array zwei Werte hat, obwohl das Array noch nichts enthalten sollte, wenn das Panel zur Seite hinzugefügt wird.
Hier ist mein Code:
Layoutseite:

Code: Select all

        




@ViewData["Title"] - SpiideeUI





[*]






@* 


SpiideeUI




[list]

Home

[*]
Privacy

[/list]



 *@


@RenderBody()


@* 

© 2026 - SpiideeUI - Privacy

  *@
@await RenderSectionAsync("Scripts", required: false)

Skriptseite:

Code: Select all

        // --------------------------
// GLOBAL STATE
// --------------------------
let selectorChosen;
let isEdit = false;
let menuJsonState = [];
let idIncArray = [];

// --------------------------
// INITIALIZATION
// --------------------------
let cmcInitialized = false;

function initMenuCanvas() {
if (cmcInitialized) return;
cmcInitialized = true;

console.count("initMenuCanvas");

const jsonCanvas = getJsonContentType("div");
jsonCanvas.lgstyle = "background-color:#ffffff;width:100%;min-height:70px;";
menuJsonState.push(jsonCanvas);

const panel = $(".cmc-controls-panel").first();
if (panel.length) {
resetSelection(panel);
}
}

// --------------------------
// EVENTS
// --------------------------
$(document).on("click", ".cmc-menu-con *", function (e) {
e.stopPropagation();
resetSelection(this);
});

$(document).on("click", "#btn1", function (e) {
e.stopPropagation();
$("body").append(getTransHtml());
$("body").append(displayHtmlSelectorChooser());
});

$(document).on("click", ".select-chooser-btn", function (e) {
e.stopPropagation();
const valueSelect = $(".select-chooser-select").val();

const json = getJsonContentType("div");
json.class = `col-${valueSelect} col-sm-${valueSelect} col-md-${valueSelect} col-lg-${valueSelect}`;
json.lgstyle = "min-height:50px;";
menuJsonState.push(json);

const colWidth = $(getColWidthEl(valueSelect));
$(selectorChosen).append(colWidth);
resetSelection(colWidth);
});

$(document).on("click", "#btn2", function (e) {
e.stopPropagation();

const jsonCon = getJsonContentType("div");
jsonCon.class = "container";
jsonCon.lgstyle += "display:flex;height:100%;";
menuJsonState.push(jsonCon);

const jsonRow = getJsonContentType("div");
jsonRow.class = "row";
jsonRow.lgstyle += "height:100%;";
menuJsonState.push(jsonRow);

const container = $(getContainerEl());
const row = $(getRowEl());

$(container).append(row);
$(selectorChosen).append(container);
resetSelection(row);
});

$(document).on("click", ".select-chooser-close", function (e) {
e.stopPropagation();
$(".back-trans, .select-chooser-container").remove();
});

// --------------------------
// HELPER FUNCTIONS
// --------------------------
function getContainerEl() { return ""; }
function getRowEl() { return ""; }
function getColWidthEl(val) {
return ``;
}
function getTransHtml() { return ""; }

function displayHtmlSelectorChooser() {
return `


ROW SELECTOR


Select how many rows you want for your layout, the maximum layout size is 12.


${Array.from({ length: 12 }, (_, i) =>  `${i + 1}`).join('')}




Close
SUBMIT



`;
}

function resetSelection(newContainer) {
$(".cmc-menu-con *").removeClass("cmc-selector-sel").addClass("cmc-selector-unsel");
$(newContainer).removeClass("cmc-selector-unsel").addClass("cmc-selector-sel");
selectorChosen = newContainer;
}

// --------------------------
// JSON + ID GENERATION
// --------------------------
function getJsonContentType(tagName) {
const guid = getTagNameIDIncrement(tagName) + generateGuid().replace("-", "");
return {
[guid]: {
class: "",
lgstyle: "",
mdstyle: "",
smstyle: "",
hoverstyle: "",
beforestyle: "",
afterstyle: "",
}
};
}

function getTagNameIDIncrement(tagName) {
tagName = tagName.toUpperCase();

// get used increments for this tag
const used = idIncArray.filter(e => e.tagName === tagName).map(e => e.val);

// next increment
const next = used.length ? Math.max(...used) + 1 : 1;

// store
idIncArray.push({ tagName, val: next });

return tagName + String(next).padStart(2, "0");
}

Indexseite:

Code: Select all

        @page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
Custom Menu Component

@section Scripts {

}


function displayMenuEditor(){

var html = `



[i][/i]

[i][/i]















Toolbox



[i][/i]

IMAGE




[i][/i]

LINK BUTON






`;

return html;
}

$(document)
.off("click", "#btnCMC")
.on("click", "#btnCMC", function (e) {
e.preventDefault();
console.log("Clicked CMC Button");

$(".menuEditor").append(displayMenuEditor());
initMenuCanvas();
});

Aber „idIncArray“ in meiner Funktion „getTagNameIDIncrement“ zeigt an, wenn ich den Menüeditor zum ersten Mal ausführe:
wie

Sie können im Bild unten sehen:
Ich kann mir nicht vorstellen, warum das dort passiert sollten nur keine Elemente sein, aber warum gibt es zwei.