Question

我将开始解释我拥有的东西，然后我需要它做什么。我正在使用一个包含“组”字段的页面。在该组中有四个字段，表示“列”中的内容。此组中还有一个选择框，询问我要使用的列数。在这个页面上，我可以添加和删除多个“组”。

根据选择框中选择的数字，我需要隐藏/显示四个列字段。

它看起来像这样：

Group 1:
    Number of Columns = 1 Column
    Column 1 Content (shown)
    Column 2 Content (hidden)
    Column 3 Content (hidden)
    Column 4 Content (hidden)
Group 2:
    Number of Columns = 3 Column
    Column 1 Content (shown)
    Column 2 Content (shown)
    Column 3 Content (shown)
    Column 4 Content (hidden)
[add group]

我需要为加载时显示的每个组运行脚本，并且每当更改选择框时运行脚本，然后在创建新组时再次运行脚本。

到目前为止，我有一个脚本可以在加载的第一个组上工作，并且只要在第一个组上更改了选择框。我也需要它来迭代其他组。我确定我需要在某个地方使用.each（）或其他东西，但我不知道在哪里或者如何使用。

这是我目前的JS：

$(function() {
    var csColumns = $('select[name*="section_columns"]');
    var csContent1 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(5)');
    var csContent2 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(6)');
    var csContent3 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(7)');
    var csContent4 = csColumns.parents().eq(7).children('.panel-body').children('div:nth-child(8)');
    csColumnsValue();

    csColumns.change(function() {
        csColumnsValue();
    });

    function csColumnsValue() {
        if (csColumns.val() == 'one') {
            csContent2.hide();
            csContent3.hide();
            csContent4.hide();
        } else if (csColumns.val() == 'two') {
            csContent2.show();
            csContent3.hide();
            csContent4.hide();
        } else if (csColumns.val() == 'three') {
            csContent2.show();
            csContent3.show();
            csContent4.hide();
        } else if (csColumns.val() == 'four') {
            csContent2.show();
            csContent3.show();
            csContent4.show();
        }
    }

    $(".repeater-add button").click(function() {
        csColumnsValue();
    });
});

Answer 1

如果我在这里正确理解你的问题是你如何做到这一点：

var $groupClone = $('.group').eq(0).clone();
$(".wrapper").on("change", ".col-num", function(){
    var num = $(this).val();
    var $parentGroup = $(this).parents('.group');
  $(".columns li:gt("+(num - 1)+")", $parentGroup).hide();
  $(".columns li:lt("+num+")", $parentGroup).show();
});

$('#add-group').on('click', function(){
    $groupClone.clone().appendTo('.wrapper');
});

DEMO： https://jsfiddle.net/ghxLsg6g/1/

[基于评论的更新]

非常接近！我做了一个更接近我的标记的jsfiddle   但我不能让它与其他团队合作，而且还需要   在负载上也为每个组执行它（可以加载多个   群体是默认的）jsfiddle.net/3twj1fee/2 - BlueCaret 4小时前

那么，更改选项时应该看到什么？为什么那里   是没有字段1？是否将html更改作为选项或必须   使用这个标记？ - Sam Battat 3小时前

对不起，＆＃34;字段2-4＆＃34;只是一些额外的领域。我没有   控制html所以只显示其他元素   与＆＃34; Columns＆＃34;相同的父母领域。第1列到第4列   字段应该隐藏/显示。但我真正的问题是   添加时，它不会对第二组执行任何操作。 - BlueCaret 1   小时前

这解决了无响应动态元素的问题，您应该使用静态父

选择动态元素

$(".repeater-slot").on("change", "select[name*='section_columns']", function(){
....
...
});

https://jsfiddle.net/3twj1fee/3/

真正的问题是如果字段和列div具有相同的类名，并且具有相同的父级，那么您将如何确定第一，第二，第三和第四列？（假设字段2-4并不总是相同的数字，意味着在4列之前总是有4个字段（div）？）

如果字段数始终为4，那么很容易解决，请参阅演示：https://jsfiddle.net/3twj1fee/4/

Jquery：为元素

1 个答案: