두 개의 숨겨진 입력 필드 jquery 및 수정

Question

사용자가 특정 프로젝트를 "승인"또는 "거부"할 수있는 정보를 표시하는 테이블이 있습니다. 나는 두 개의 이미지를 만들었습니다 : 부인을위한 십자가 표시와 승인을위한 확인 표시. 클릭 할 때마다 고유 한 ID를 숨겨진 양식 필드 (rejectedProjs 및 approvedProjs)에 추가합니다. 또한 사용자가 "거부"를 클릭하면 이유를 입력 할 수 있도록 텍스트 상자를 표시합니다. 이것은 내가 지금까지 가지고있는 것입니다 :

$("a[name^=reject-]").each(function() { 

    var name = $(this).attr('name');  
    var p_project_number = name.split('-')[1]; 
    $("a[name=reject-"+p_project_number+"]").tipbox("Reject pricing for "+p_project_number, 0, "reject-"+p_project_number); 
    $(this).click(function() { 
$("textarea[name=rejReason-"+p_project_number+"]").show(); 
rP = $("#rejectedProjs").val(); 
$("#rejectedProjs").val(rP+','+p_project_number); 
alert('rejects: '+$("#rejectedProjs").val()); 
    }); 
}); 

두 가지 문제점이 있습니다. 첫째, 동일한 프로젝트에 대해 거부 버튼을 두 번 클릭하면 경고 상자에 프로젝트 번호가 두 번 표시됩니다. 해당 프로젝트 번호가 이미 있는지 보려면 $ ("# rejectedProjs"). val()을 어떻게 확인할 수 있습니까? 둘째, 먼저 거부 한 다음 승인하면 $ ("# rejectedProjs")에서 해당 프로젝트를 제거해야합니다. 이 작업을 수행하는 방법을 잘 모릅니다. 미리 감사드립니다.

Answer 1

숨겨진 입력 대신 배열을 사용합니다. 이렇게하면 배열을 통해 기존 값을 쉽게 검색하고 새 값을 추가하고 값을 제거 할 수 있습니다.

var accepted = new Array(); 
var rejected = new Array(); 

function process(action, id) { 
    if(action == "accept") { 
     // look for item in accepted array, add if doesnt exist 
     if(findInArray(accepted, id) == -1) { 
      accepted.push(id); 
     } 

     // look for item in rejected array, remove if exists 

     var rejectedIdx = findInArray(rejected, id); 
     if(rejectedIdx == -1) { 
      accepted.splice(rejectedIdx, 1); 
     } 
    } else { 
     // The same, but for rejected ids. Not included for brevity... 
    } 

    // update hidden inputs 
    $("hiddenAccepted").val(accepted.join(",")); 
    $("hiddenRejected").val(rejectedaccepted.join(",")); 
} 

function findInArray(array, value) { 
    for(var i = 0; i < array.length; ++i) { 
     if(array[i] == value] return i; 
    } 
    return -1; 
} 

실제로 숨겨진 입력에 포함하는 것을 잊지 말아 : 그런 다음, 조작 후 완전한 세트는 다음과 같이 표시됩니다 array.join()

아주 간단한 예제를 사용하여 배열에 숨겨진 입력 값입니다 페이지는 :

<input type="hidden" name="hiddenAccepted" /> 
<input type="hidden" name="hiddenRejected" /> 

Answer 2

하나의 옵션은 사용자가 조작하는 입력을 갖는 대신, 각 프로젝트에 대해 고유 한 숨겨진 입력을 포함합니다. 그런 다음 버튼을 누를 때 해당 입력 만 변경하십시오. 그런 다음 몇 가지 옵션을 사용할 수 있습니다. 제출시 클라이언트 측에서 집계하고 서버 측에서 자동으로 집계하십시오 (서버 측에 따라 다름).

Answer 3

나는 당신의 작업에 다음과 같은 접근 방식을 취할 것입니다 :

<div class="project"> 
    <span>some project elements</span> 
    <input name="number" type="hidden" value="1"/> 
    <a class="reject">Reject</a> 
    <a class="approve">Approve</a> 
</div> 

<script> 
    // Manipulating css classes on reject. 
    $(".reject").click(function(){ 
     $(this).parent().removeClass("approved").addClass("rejected"); 
    }); 

    // How to get all rejected numbers? 
    var rejected_numbers = $.map($(".project.rejected :hidden"), function(){ 
     return $(this).val(); 
    }).join(","); 
</script> 

Answer 4

예를 들어 클래스를 사용하십시오. 승인 된 프로젝트를 식별하기 위해 'selected'를 선택하십시오. 버튼을 클릭 할 때마다 & 체크를 실행 한 다음 그에 따라 조치를 수행하십시오.