사용자 지정 이름으로 입력 필드를 동적으로 추가

FRQ6692

이들에서 사용자 지정 이름을 할당하여 입력 필드를 동적으로 추가하려고합니다 aa,ab,ac,ad.

다음은 코드입니다.

<script>
$(function() {
  $('body').on('click', '.post-link', function() {
    $('#post-container').fadeIn();

    var post_title = $(this).closest('div').find('a').text();

    var val = $(this).text("val");
    if (val == "")
      var post_id = "aa";
    else if (val == "aa")
      var post_id = "ab";
    else if (val == "ab")
      var post_id = "ac";
    else
      var post_id = "ad";

    if ($('#post-container input').length <= 3)
      $('#post-container').append('<input name="' + post_id + '" value="' + post_title + '">-- <a href="#" class="remove-title">REMOVE</a></input>');
  });

  $('body').on('click', '.remove-title', function() {
    $(this).closest('input').remove();
  });

});
</script>

HTML :

<button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<div id="post-container"> </div>

이제 문제는 이것이 name="ad"네 필드 모두에 추가된다는 것입니다 . 하지만 이름이 다른 각 필드가 필요합니다.

각 입력 필드에 다른 이름을 지정하는 방법은 무엇입니까?

그리고 제목 제거 링크가 작동하지 않는 이유는 무엇입니까?

Codemole

다음을 시도하십시오 :

$('body').on('click', '.post-link', function(){
  var names = ['aa', 'ab', 'ac', 'ad'];
  $('#post-container').fadeIn();
  var post_title = $(this).closest('div').find('a').text();

  for (var i=0; i<names.length; i++) {
    if ($('#post-container').find('input[name=' + names[i] + ']').length < 1) {
      $('#post-container').append( '<div class="row"><input name="' + names[i] + '" value="'+post_title+'">-- <a href="#" class="remove-title">REMOVE</a></input></div>' );   
      break;
    }
  }
});

$('body').on('click', '.remove-title', function() {
  $(this).closest('.row').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button  class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<div id="post-container"> </div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

특정 값이 양식 필드에 입력 될 때까지 양식 필드를 동적으로 추가

분류에서Dev

사용자가 지정한 수를 기반으로 HTML 양식 필드를 동적으로 추가

분류에서Dev

사용자 선택에 따라 동적으로 입력 필드 추가

분류에서Dev

사용자가 입력 한 입력 값을 다른 필드 (기본값이 있음)에 동적으로 추가

분류에서Dev

jQuery를 사용하여 사용자 정의 된 HTML 양식 파일 입력을 동적으로 추가

분류에서Dev

이름으로 입력 필드에 자리 표시 자 추가

분류에서Dev

추가 텍스트 입력 필드를 동적으로 추가 한 후 jQuery 자동 완성이 실패 함

분류에서Dev

동적으로 추가 된 입력 필드는 유효성 검사를 통과했으며 다른 페이지로 제출할 수 없습니다.

분류에서Dev

입력에서 여러 이미지를 동적으로 추가

분류에서Dev

페이지에 동적으로 추가 된 입력 필드에 대한 참조

분류에서Dev

양식 입력 필드를 동적으로 추가

분류에서Dev

ReactJS는 여러 입력 필드를 동적으로 추가

분류에서Dev

Angular 응용 프로그램에서 동적으로 입력 필드 추가

분류에서Dev

라디오 입력을 동적으로 추가하면 동일한 이름을 가진 다른 사용자와 작동하지 않습니다.

분류에서Dev

입력 상자 추가시 동적으로 div 크기 조정

분류에서Dev

WordPress의 고급 사용자 정의 필드를 사용하여 동적으로 Bootstrap Modal에 콘텐츠 추가

분류에서Dev

입력 필드를 사용하여 여러 <tr>을 동적으로 추가 및 제거하는 방법

분류에서Dev

jquery를 사용하여 동적으로 추가 된 입력 상자의 입력 값을 가져 오는 방법

분류에서Dev

JQuery는 동적으로 추가 된 다른 입력 필드에 대해 동적으로 추가 된 입력 필드의 유효성을 검사합니다.

분류에서Dev

MongoDB에서 필드 이름을 키로 사용하여 사용자 지정 개체를 출력으로 만드는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 변수를 이름으로 사용하여 입력 필드 값 가져 오기

분류에서Dev

로그인 기능 문제 : $ _POST가 정상적으로 작동하지 않고 사용자 입력으로 변수를 할당 할 수 없습니다.

분류에서Dev

입력 필드에 동적으로 추천 목록 추가

분류에서Dev

Flask는 첫 번째 유효성 검사에서 동적으로 추가 된 입력 필드를 인식하지 못합니다.

분류에서Dev

Typescript : 특정 이름으로 새 필드를 추가하여 동적으로 인터페이스 확장

분류에서Dev

클래스의 인스턴스에서 동적으로 메서드 호출 (사용자가 인스턴스 이름을 동적으로 지정)

분류에서Dev

Win32 C ++의 ToolBar 버튼에 사용자 지정 이미지를 동적으로 추가하는 방법은 무엇입니까?

분류에서Dev

React-상태를 사용하여 동적으로 입력 태그 추가

분류에서Dev

사용자가 입력 한 항목에서 Xpath를 자동으로 감지

Related 관련 기사

  1. 1

    특정 값이 양식 필드에 입력 될 때까지 양식 필드를 동적으로 추가

  2. 2

    사용자가 지정한 수를 기반으로 HTML 양식 필드를 동적으로 추가

  3. 3

    사용자 선택에 따라 동적으로 입력 필드 추가

  4. 4

    사용자가 입력 한 입력 값을 다른 필드 (기본값이 있음)에 동적으로 추가

  5. 5

    jQuery를 사용하여 사용자 정의 된 HTML 양식 파일 입력을 동적으로 추가

  6. 6

    이름으로 입력 필드에 자리 표시 자 추가

  7. 7

    추가 텍스트 입력 필드를 동적으로 추가 한 후 jQuery 자동 완성이 실패 함

  8. 8

    동적으로 추가 된 입력 필드는 유효성 검사를 통과했으며 다른 페이지로 제출할 수 없습니다.

  9. 9

    입력에서 여러 이미지를 동적으로 추가

  10. 10

    페이지에 동적으로 추가 된 입력 필드에 대한 참조

  11. 11

    양식 입력 필드를 동적으로 추가

  12. 12

    ReactJS는 여러 입력 필드를 동적으로 추가

  13. 13

    Angular 응용 프로그램에서 동적으로 입력 필드 추가

  14. 14

    라디오 입력을 동적으로 추가하면 동일한 이름을 가진 다른 사용자와 작동하지 않습니다.

  15. 15

    입력 상자 추가시 동적으로 div 크기 조정

  16. 16

    WordPress의 고급 사용자 정의 필드를 사용하여 동적으로 Bootstrap Modal에 콘텐츠 추가

  17. 17

    입력 필드를 사용하여 여러 <tr>을 동적으로 추가 및 제거하는 방법

  18. 18

    jquery를 사용하여 동적으로 추가 된 입력 상자의 입력 값을 가져 오는 방법

  19. 19

    JQuery는 동적으로 추가 된 다른 입력 필드에 대해 동적으로 추가 된 입력 필드의 유효성을 검사합니다.

  20. 20

    MongoDB에서 필드 이름을 키로 사용하여 사용자 지정 개체를 출력으로 만드는 방법은 무엇입니까?

  21. 21

    자바 스크립트에서 변수를 이름으로 사용하여 입력 필드 값 가져 오기

  22. 22

    로그인 기능 문제 : $ _POST가 정상적으로 작동하지 않고 사용자 입력으로 변수를 할당 할 수 없습니다.

  23. 23

    입력 필드에 동적으로 추천 목록 추가

  24. 24

    Flask는 첫 번째 유효성 검사에서 동적으로 추가 된 입력 필드를 인식하지 못합니다.

  25. 25

    Typescript : 특정 이름으로 새 필드를 추가하여 동적으로 인터페이스 확장

  26. 26

    클래스의 인스턴스에서 동적으로 메서드 호출 (사용자가 인스턴스 이름을 동적으로 지정)

  27. 27

    Win32 C ++의 ToolBar 버튼에 사용자 지정 이미지를 동적으로 추가하는 방법은 무엇입니까?

  28. 28

    React-상태를 사용하여 동적으로 입력 태그 추가

  29. 29

    사용자가 입력 한 항목에서 Xpath를 자동으로 감지

뜨겁다태그

보관