Prototype或JQuery改变隐藏字段的值?

时间:2010-02-03 02:24:15

标签: jquery prototypejs

我在原型改变隐藏字段的值时遇到了一些麻烦。

功能:

function remove_fields (link) {
    $(link).next('input[type=hidden]').value = '';
    $(link).up(".open_hours").hide();
}

如果我注释掉$(link).next('input[type=hidden]').value = '';隐藏功能。试图设置该值会给我一个错误:

$(link).next("input[type=hidden]") is undefined

这是关于函数调用的HTML:

    <div class="monday">

        <div class ="open_hours">
            <li><label for="location_monday">Monday</label>
            Open: 06:29PM - 
            Close: 04:21PM 
            <a href="#" onclick="remove_fields(this); return false;">remove</a></li>

            <li class="hidden optional" id="location_monday_open_input"><input id="location_monday_open" name="location[monday_open]" type="hidden" value="18:29:00" /></li>
            <li class="hidden optional" id="location_monday_close_input"><input class="close" id="location_monday_close" name="location[monday_close]" type="hidden" value="16:21:00" /></li>
  </div>    
</div>

不确定我在这里做错了什么?谢谢伙计们!

3 个答案:

答案 0 :(得分:3)

基于jQuery的回答

由于您已为输入提供了id,因此可以使用id选择器

$("#location_monday_close").val('');

如果你想获得不基于id的隐藏元素,那么你可以使用像

这样的东西
$(link).closest('div.open_hours').find('input[type=hidden]').val('');

另外,如果你想隐藏类名为open_hours的div,你可以使用

$("div.open_hours").hide();

我已经为你重写了代码。

$(function(){
    $("#anch1").click(function(){
        remove_fields ( $(this) );      
    });

    function remove_fields (link) 
    {
        var parentDiv = link.closest('div.open_hours');
        parentDiv.find('input[type=hidden]').val('');
        parentDiv.hide();
    }

});

<div class="monday">
    <div class ="open_hours">
        <li><label for="location_monday">Monday</label>
            Open: 06:29PM - 
            Close: 04:21PM 
            <a id="anch1" href="#" return false;">remove</a>
        </li>
        <li class="hidden optional" id="location_monday_open_input">
            <input id="location_monday_open" name="location[monday_open]" type="hidden" value="18:29:00" />
        </li>
        <li class="hidden optional" id="location_monday_close_input">
            <input class="close" id="location_monday_close" name="location[monday_close]" type="hidden" value="16:21:00" />
        </li>
    </div>    
</div>

<强> 修改

next 找到选择器的紧随其后的兄弟(这是锚标记)。在您的HTML中,锚标签没有下一个兄弟。

答案 1 :(得分:3)

对于原型,请执行以下操作:

function remove_fields(link) {
  var e = link.next().identify();
  $(e).setValue("");
  $(e).up(".open_hours").hide();
}

您需要在设置值之前识别/返回元素ID。

答案 2 :(得分:0)

你已经标记了jquery和prototype,在jquery中你可以尝试这样:

$(link).next('input[type=hidden]').val = '';