编辑现有输入.value()而不影响其他输入val()

时间:2013-09-26 11:51:34

标签: jquery

对于你们大多数人来说,这将毫无疑问,但我无法跟踪或思考如何解决我遇到的这个问题。看一看 FIDDLE

在这个函数中它应该编辑输入的值并且只发送到那个输入,就像在我的代码el中一样,它指的是所有被点击的元素。

我认为代码解释了我的角度,在这里粘贴一些jQuery,如果你需要更多只是问。

var app = {

sendEditDataToApp: function (el) {

    //Type of element to send
    var elType = jQuery(el).prev().attr('name')

    //Element data
    var elVal = jQuery(el).prev().val()

    //Match the edit element with the element constructor
    var inConstructor = jQuery(el).closest('.display-data').prev()

    inConstructor.addClass('opened')

    //Send to app
    jQuery('.builder .send').click(function () {

        //Set new data input value
        jQuery(el).parent().find('input').val(inConstructor.find(this).prev().val())
        alert(inConstructor.find(this).prev().val())

        inConstructor.removeClass('opened')

    });


}

}

jQuery('.open').click(function(e) {
    e.preventDefault()
    app.sendEditDataToApp(this)
})

HTML:

<div class="builder">
    <input value="" />
    <button class="send">Send</button>
</div>

<div class="display-data">  
<div class="row"> 
<input name="html" value="input 1" />
<button class="open">Open</button>
</div>

<div class="row"> 
<input name="html" value="input 2" />
<button class="open">Open</button>
</div>

<div class="row"> 
<input name="html" value="input 3" />
<button class="open">Open</button>
</div>  
</div>

我的代码正在获取输入的.val(),我不确定为什么在我使用thisel时添加到所有输入只会引用特定输入点击来自。

请注意,我重写了这段代码以适应更好的小提琴,它基于我的真实代码的逻辑,有些是从我的真实代码中复制和粘贴的,大部分是重新编辑的。主要目标是编辑打开的点击来自的特定输入。

我想说的重点是jQuery(el).parent().find('input').val(inConstructor.find(this).prev().val())

(警告:这可能是一个不正确的陈述,我的逻辑在这里)el指的是第一个元素.open,而this指的是.send。我找到.open点击来自的具体输入,然后在点击inConstructor this时将该值设置为.send值内的任何值。所以对我来说,它应该获取输入的值并将其放在特定的jQuery(el).parent().find('input')&lt; - 而不是所有已被点击的内容中。

1 个答案:

答案 0 :(得分:0)

试试这个:

var app = {

    sendEditDataToApp: function (el) {

        //Type of element to send
        var elType = jQuery(el).prev().attr('name')

        //Element data
        var elVal = $(el).prev().val()

        //Match the edit element with the element constructor
        var inConstructor = $(el).closest('.display-data').prev()

        inConstructor.addClass('opened')

        //Send to app
        $('.builder .send').click(function (ev) {
            //Set new data input value
            $(el).parent().find('input').val(inConstructor.find(this).prev().val())
            alert(inConstructor.find(this).prev().val())            
            inConstructor.removeClass('opened');
            $(this).unbind('click');
            return false;

        });


    }

}

jQuery('.open').click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    app.sendEditDataToApp(this);
    return false;
})

Fiddle