使用增量ID定位自动生成的字段(JavaScript)

时间:2016-06-27 15:53:11

标签: javascript jquery

我有一组HTML字段,其中包含“添加更多字段”按钮。用户可以根据需要添加任意数量的字段。

id

“添加更多”选项会触发JS创建一组新字段,并将name// [...] next = next + 1; // [...] var fieldtype_1 = '<input id="alpha' + next + '" name="alpha' + next + '">' var fieldtype_2 = '<input id="beta' + next + '" name="beta' + next + '" style="display:none;">' var select_options = ` <option value="one">one</option> <option value="two">two</option> ` var fieldtype_3 = '<select id="select_box' + next + '">' + select_options + '</select>' 增加一。代码经过简化以简化,但我可以根据要求发布所有内容。

beta

$(document).ready(function () { toggleFields(); $("#select_box1").change(function () { toggleFields(); }); }); function toggleFields() { if ($("#select_box1").val() == "two") { $("#alpha1").hide(); $("#beta1").show(); } else { $("#alpha1").show(); $("#beta1").hide(); } } 字段需要根据用户输入显示/隐藏到选择框中。

#include <sys/wait.h>
#include <stdio.h>
#include <stdlib.h>
#include <unistd.h>
#include <string.h>

/* in this code i will make a child process with fork command
then i will create pipe using pipe commands.
i will transfer data from the child process to the father process
omriziner code
*/

void main(int argc,char *argv[])
{
    if(argc < 2){
        printf("prototype error \n<Enter any data you wana write> \n");
        return;
    }

    int fd[2]; // creating array with 2 places for 2 fd'stdio
    // fd[0] is set to read file in the pipe
    //fd[1] is set to write file in the pipe
    int piperes;
    pid_t childpid;
    char buff[5];
    char * data = "learning to the exam";
    printf("father pid %d:\n",getpid());
    printf ("size of data is %d \n",(int)sizeof(argv[1]));
    printf ("size of buff is %d \n",(int)sizeof(buff));
    piperes = pipe(fd);
    if(piperes < 0){
        perror("PIPE ERR");
        exit(1);
    }
    printf("Pipe succeed \n");
    if((childpid = fork()) == -1){ // fork will create a child process
        perror("FORK ERR");
        exit(1);
    }
// when fork  suceed - the pid of the child will return in the parent and 0 will return in the child
// when fork fail - the pid will be -1

    printf("Fork succeed, fork return is %d and process pid is %d :\n",childpid,getpid());

    if(childpid == 0){ // if pid zero , wer in the child prcs
        close(fd[0]);    
        write(fd[1],argv[1],sizeof(argv[1])); // send data to the write fd of the pipe 
        printf("data was written to fd[1] by pid : %d \n",getpid());
        exit(0);
    }
    else{ // in this case, we're in the father process
        close(fd[1]);
        read(fd[0],buff,sizeof(argv[1])+1);
        printf("Recived data is ''%s''", buff);
        printf("By pid : %d \n",getpid());
        exit(1);
    }
}

上面的代码适用于我的默认id(1)字段集。但是,我不知道如何定位用户可能添加到此表单的所有(未知数量)其他字段。

2 个答案:

答案 0 :(得分:2)

将class activeSelect添加到您正在使用的每个选择中。将事件绑定到文档将允许您动态更改DOM,并且事件将绑定到每个添加的元素

$(document).ready(function () {
    toggleFields(1); 
    $(document).on("change", ".activeSelect", function () {
        toggleFields($(this).attr("id").substr(10));
    });
});
function toggleFields(id) {
    if ($("#select_box"+id).val() == "two") {
        $("#alpha"+id).hide();
        $("#beta"+id).show();
    }
    else {
        $("#alpha"+id).show();
        $("#beta"+id).hide();
    }
}

答案 1 :(得分:0)

jsFiddle 使用class作为字段组的单个标识符,并像这样包装组:

<div class="wrapper">
  <input id="alpha1" class="item alpha" name="alpha1" type="text">
  <input id="beta1" class="item beta" name="beta1" type="text" style="display:none;">
  <select id="select_box1" name="select_box1" class="selectClass">
   <option value="one">one</option>
   <option value="two">two</option>
  </select>
</div>

然后在所选部分中切换所需类的所有元素:

$('.selectClass').on('change', function(){
   var classToShow = $(this).val() == "two" ? "beta" : "alpha";
   $(this).closest('.wrapper').find('.item').hide();
   $(this).closest('.wrapper').find('.' + classToShow).show();
});