基于下拉菜单创建必填字段。 [HTML、JAVASCRIPT、JQuery]

Question

我有一个下拉列表 [name="./fixedListForm"]，其中有 2 个字段

1. 外部
2. 静态内容

下拉值< /a> 选择外部时，将启用具有 2 个字段的多字段。

1. TabID [文本字段]
2. Alt 文本 [文本字段]

由于上述两个字段是多字段，我们可以添加 n 个带有名称的字段。例如

1. 选项卡 ID [文本字段，存储名称=./fixedList/item0/./tabId]
2. 替代文本 [文本字段，存储名称=./fixedList/item0/./alt] 添加
3. 选项卡 ID [文本字段，存储名称=./fixedList/item1/./tabId]
4. 替代文本 [文本字段， ，存储名称=./fixedList/item1/./alt] 添加

外部多字段中的选项卡 ID

等等......它会增加项目 0、项目 1、项目 2… 每个项目都包含 [./tabid 和 ./alt]

在选择静态内容时，将添加另一组具有 2 个字段的多字段

1. Tab ID [Text Field]
2. Alt Text [text Field]

由于上述两个字段是多字段，我们可以添加 n 个带有名称的字段。例如

1. 选项卡 ID [文本字段，使用名称 ./staticContent/item0/./tabId 存储]
2. 替代文本 [文本字段，使用名称 ./staticContent/item0/./alt 存储] 添加
3. 选项卡 ID [文本字段，使用名称 ./staticContent/item1/./tabId 存储]
4. 替代文本 [文本字段， ，使用名称 ./staticContent/item1/./alt 存储] 添加

依此类推...它将增加item0、item1、item2...并且每个item都包含[./tabid和./alt] 静态多字段中的选项卡 ID

现在，这里的要求是，如果我们有的话，我必须强制使用替代文本TAB ID 中的某些值。 意思是

 var tabId = $('.cmp-list__editor').find('input[name *="./tabId"]').val();
    if (tabId == "") {
        $('.cmp-teaser__editor').find('input[name *="./alt"]').attr("aria-required", false);
    }else{$('.cmp-list__editor').find('input[name *="./alt"]').attr("aria-required", true);}

.cmp-list__editor 是父 Div 的类。 我面临的问题是，如果我们有单个值字段，即只有单个 TABID 和 ALT 文本，则上面的代码可以正常工作。

但在这里我们必须创建一个循环，

1. 如果下拉列表选择了外部值，它将从下拉列表值中进行搜索
2. ，如果我们在 TAB ID 中有某个值，则逻辑将应用于强制替代文本 [./fixedList/item0/./tabId - ./fixedList/item0/./alt] [./fixedList/item1/./tabId - ./fixedList/item1/./alt]
3. 如果下拉列表选择了静态值，如果我们在 TAB ID 中有一些值，逻辑将应用强制替代文本 [./staticContent/item0/./tabId - ./staticContent/item0/./alt] [./staticContent/item1/./tabId - ./staticContent/item1/./alt]

Answer 1

如果您检查 multifield 的 HTML，您的每个 multifield 都位于 coral-multifield-item 内。也许您可以获得这个元素（它将返回当时添加到对话框中的所有元素）。获得 this 后，迭代每个元素。

var items = $("coral-multifield-item")

coral-multifield-item

为您的个人字段添加一个独特的类，如下所示

granite:class

添加后，您可以执行以下操作来获取这些字段的值

$( items ).each(function( index ) {
 console.log($( this ).find(".test-class").val());
});

假设测试类是添加到我的多字段中第一个文本字段的类，上面的 JS 将打印 JS 中第一个文本字段的值。对所有字段做类似的逻辑，在jquery中轻松获取。

如果您熟悉 Jquery，您可以调整此逻辑并尝试实现您的要求。否则，请向精通 Jquery 的人寻求帮助。