我在Visual Composer中有一些自定义块元素，在我的多站点多语言网站上都可以正常工作。
所有块元素均具有文本字段Bloc ID 。此文本字段的值应包含一个唯一值，如下所示：
countryCode_languageCode_blockName_pageName_uniqueID = CH_FR_textBox_home_123
我尝试使用视觉作曲家提供的不同挂钩，但没有帮助。所以我决定使用javascript（Jquery）。
我已经设法完成其中仅包含一个块元素的行被克隆以及在实际行中重复一个块的部分。工作正常。
由于我需要更改的大多数元素是DOM，直到您触发它才出现，这使得跟踪文本字段变得很困难。我必须使用jquery.initialize库来检测这些更改。
问题出在克隆包含多个块元素的行时，找不到用唯一ID更改每个文本字段的方法。
有什么想法可以解决这个问题，或者有没有更好的方法来解决这个问题，甚至没有提供js甚至可以向我提供一些文档/文章来解决这个问题？
这是我的剧本：
生成唯一ID
function generateUniqueId() {
return '_' + Math.random().toString(36).substr(2, 9);
}
获取块名
function getBlockName(el) {
blocName = $(el).find('h3').text();
blocName = blocName.replace(/ |\+|Settings|-/g, "");
return blocName;
}
收听事件-创建选项卡控件时
$.initialize("#vc_ui-panel-edit-element .vc_edit-form-tab-control", function() {
var saveBtn, saveBtnText;
var block_id = $("input[name='block_id']");
var cta_id = $("input[name='cta_id']");
var blocName = getBlockName('#vc_ui-panel-edit-element');
var unique_cta_id_on_add = countryCode + '_' + langCode + '_' + pageTitle + '_' + blocName + generateUniqueId();
var unique_block_id_on_add = countryCode + '_' + langCode + '_' + pageTitle + '_' + blocName + generateUniqueId();
$(this).on('click', function(){
var tabName = $(this).find('button').text();
if (tabName == "ID Bloc"
|| tabName == "Blocs ID"
|| tabName == "Bloc ID") {
console.log('inside');
var block_id = $("input[name='block_id']");
var cta_id = $("input[name='cta_id']");
if ($(block_id).hasClass('block_id')){
$(".block_id").attr('readonly', true);
}
if ($(cta_id).hasClass('cta_id')){
$(".cta_id").attr('readonly', true);
}
}
});
if (block_id.val() == ''
|| block_id.val() == null) {
block_id.val(unique_block_id_on_add);
}
if (cta_id.val() == null
|| cta_id.val() == '') {
console.log('changed on empty');
cta_id.val(unique_cta_id_on_add);
}
/*
* When a row is duplicated with a single block
* inside, this function is triggered to create
* a unique bloc/cta id for this only block
*/
if ($("body").hasClass('clone')) {
createSingleRowBlockID(block_id, cta_id);
};
/*
* When a row is duplicated with multiple block
* inside, this function is triggered to create
* a unique bloc/cta id for this each block inside
*/
var aClass = $("body").attr('class').split(" ");
var countClasses = aClass.length;
var className = aClass[countClasses - 1];
if (className.length > 5) {
var classSplit = className.split("-");
if (classSplit[0] == "clone") {
createMultipleRowBlocIDs(className, classSplit, block_id, cta_id);
}
}
}, { target: document.getElementById('vc_ui-panel-edit-element') });
听事件-触发行克隆时
$.initialize("#visual_composer_content .vc_main-sortable-element .vc_column-clone", function() {
var index, duplicateElIndex, clonedBlocksIndex;
$(this).on('click', function () {
index = ($(this).closest('.vc_main-sortable-element').index());
duplicateElIndex = index + 1;
setTimeout(function(){
var sortableBlockContainer = $("#visual_composer_content .vc_main-sortable-element")
;
var blocCount = $(sortableBlockContainer).eq(duplicateElIndex)
.find(".vc_container_for_children.ui-sortable")
.children().length;
if (blocCount > 1) {
$("body").addClass("clone-" + blocCount + "-" + duplicateElIndex);
$(sortableBlockContainer).eq(duplicateElIndex).find('.vc_control-btn-edit').trigger('click');
} else {
$("body").addClass("clone");
$(sortableBlockContainer).eq(duplicateElIndex).find('.vc_control-btn-edit').trigger('click');
}
}, 500);
});
}, { target: document.getElementById('visual_composer_content') });
触发块元素克隆按钮时监听事件
$.initialize("#visual_composer_content .vc_main-sortable-element .vc_control-btn-clone", function() {
var index, duplicateElIndex;
$(this).on('click', function () {
index = ($(this).closest('.vc_main-sortable-element').index());
duplicateElIndex = index;
$("body").addClass("clone");
setTimeout(function(){
$("#visual_composer_content .vc_main-sortable-element").eq(duplicateElIndex)
.find(".vc_container_for_children.ui-sortable .vc_control-btn.vc_control-btn-edit")
.trigger('click');
}, 500);
});
}, { target: document.getElementById('visual_composer_content') });
使用单个块元素复制单行（工作正常）
function createSingleRowBlockID(blockidElem, ctaIdElem) {
var unique_block_id_on_clone = countryCode + '_' + langCode + '_' + pageTitle
+ '_' + blocName + generateUniqueId();
var unique_cta_id_on_clone = countryCode + '_' + langCode + '_' + pageTitle
+ '_' + blocName + generateUniqueId();
blockidElem.val(unique_block_id_on_clone);
ctaIdElem.val(unique_cta_id_on_clone);
saveBtn = $("#vc_ui-panel-edit-element .vc_ui-button.vc_ui-button-action");
saveBtnText = $(saveBtn).data('vc-ui-element');
if (saveBtnText == "button-save") {
saveBtn.trigger('click');
}
$("body").removeClass("clone");
}
内部有多个块元素的重复行（不是工作部分）
function createMultipleRowBlocIDs(className, aClass, blockIdElem, ctaidElem) {
var rowIndex, numOfBlocks, duplicatedBlocks, unique_block_id, unique_cta_id, count;
var sortableBlockContainer = $("#visual_composer_content .vc_main-sortable-element");
numOfBlocks = aClass[1];
rowIndex = aClass[2];
var duplicatedBlocks = sortableBlockContainer.eq(rowIndex).find(".vc_container_for_children.ui-sortable .vc_control-btn.vc_control-btn-edit");
count = 0;
$(duplicatedBlocks).each(function(i,v){
count++;
if (count != numOfBlocks) {
if (count <= 1) {
$("body").removeClass(className);
console.log('remove class');
}
$(this).trigger('click');
setTimeout(function(){
unique_block_id = countryCode + '_' + langCode + '_' + pageTitle + '_' + blocName + generateUniqueId();
unique_cta_id = countryCode + '_' + langCode + '_' + pageTitle + '_' + blocName + generateUniqueId();
blockIdElem.val(unique_block_id);
ctaidElem.val(unique_cta_id);
$("#visual_composer_content .vc_main-sortable-element .vc_ui-panel-edit-element")
.find(".vc_ui-close-button")
.trigger('click');
console.log($("#visual_composer_content .vc_main-sortable-element .vc_ui-panel-edit-element").find(".vc_ui-close-button"));
}, 500);
}
});
}