代码之家 › 专栏 › 技术社区 › Kung Fu Ninja

jquery和修改两个隐藏的输入字段

jquery

Kung Fu Ninja · 技术社区 · 16 年前

我有一个表,其中显示了一些信息,供用户“批准”或“拒绝”某些项目。我创建了两个图像:一个用于拒绝的交叉标志,以及一个用于批准的检查标志。每次单击时,我都会将唯一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”).val()中删除该项目。不知道怎么做。提前谢谢。

4 回复 | 直到 16 年前

Ariel 16 年前

我会使用数组而不是隐藏的输入。通过这种方式,您可以轻松地在数组中搜索现有值、添加新值和删除值。然后,在操作完成后,使用 array.join()

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;
}

不要忘记在页面中实际包含隐藏的输入:

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

Kyle Butt 16 年前

一个选项是,不要让您操作一个输入,而是为每个项目包含唯一的隐藏输入。然后,按下按钮时仅更改该输入。然后有几个选项:提交时在客户端对它们进行聚合,在服务器端自动对它们进行聚合(取决于服务器端)。

Anthony Serdyukov 16 年前

我将采取以下方法来完成您的任务:

<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>

Preeti 16 年前