Jquery：对元素的每个实例重复函数

Question

我将开始解释我拥有的东西，然后是我需要它做什么。我正在处理一个包含 "group" 个字段的页面。该组中有四个字段代表 "columns" 中的内容。此组中还有一个 select 框，询问我要使用多少列。在此页面上，我可以添加和删除多个 "groups".

我需要的是 hide/show 四列字段，具体取决于 select 在 select 框中输入的数字。

看起来像这样：

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]

我需要脚本运行用于加载时显示的每个组，每当更改 select 框时，然后在创建新组时再次显示。

到目前为止，我有一个脚本可以在加载的第一组上运行，并且只要在第一组上更改 select 框。不过，我也需要它来遍历其他组。我确定我需要在某个地方使用 .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');
});

演示： https://jsfiddle.net/ghxLsg6g/1/

[根据评论更新]

Very close! I made a jsfiddle that more closely resembles my markup but I can't get it to work with additional groups, and it also needs to do it on load as well for every group (could load with multiple groups be default) jsfiddle.net/3twj1fee/2 – BlueCaret 4 hours ago

So, what should be visible when you change the option? And why there is no field 1? Is making html changes an option or you have to use this markup? – Sam Battat 3 hours ago

Sorry, the "field 2-4" are just some extra fields. I don't have control over the html so just showing there are other elements within the same parent as the "Columns" fields. The Column 1 to Column 4 fields are what should be hiding/showing. But my real problem is that it doesn't do anything to a second group when added. – BlueCaret 1 hour ago

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

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

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

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

如果字段数一直是4就很好解决，看demo：https://jsfiddle.net/3twj1fee/4/

Jquery：对元素的每个实例重复函数

Jquery: Repeat function for every instance of element

each

jquery