jQuery ID + Селектор классов

Question

В настоящее время мой сценарий ниже показывает console.log(inputName) для первой переменной в моем коде независимо от того, какая кнопка нажата. Как я могу изменить скрипт, чтобы я мог получить строку ввода для строки foreach, я должен использовать селектор классов ID +?

JQuery:

$(function(){ 


$.fn.editable.defaults.mode = 'inline'; 

$.fn.editable.defaults.params = function (params) { 
    params._token = $("#_token").data("token"); 
    return params; 
}; 
    var dataURL = $('.updateField').data('url'); 
    var inputName = $('.updateField').attr("name"); 

$('.updateField').editable({ 
    type: 'text', 
    url: dataURL,  
    name: inputName,  
    placement: 'top', 
    title: 'Enter public name', 
    toggle:'manual', 
    send:'always', 
    ajaxOptions:{ 
     dataType: 'json' 
    }  
}); 

$('.edit').click(function(e){ 
     console.log(inputName); 
     e.stopPropagation(); 
     $('.updateField').editable('toggle'); 
     $('.edit').hide(); 
}); 
    $(document).on('click', '.editable-cancel, .editable-submit', function(){ 
     $('.edit').show(); 
    }) 

HTML Пример:

<div class="form-group"> 
    <label class="col-sm-2 control-label" for="siteName">Website Name</label> 

    <div class="col-sm-3"> 
     <div class="input-group"> 
     <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Name" name="siteName" placeholder="Email" type="input" value="{{ old('siteName', $siteSettingsData->siteName)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
     </div> 
    </div> 
    </div> 

Answer 1

Поскольку у вас есть несколько элементов .updateField, вам нужно найти цель в пределах своей функции щелчка, используя closest(), а затем find().

$('.edit').click(function(e) { 
    var container = $(this.closest('.input-group')); 
    var input = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 
    console.log(inputName); 
    e.stopPropagation(); 
    input.editable('toggle'); 
    container.find('.edit').hide(); 
}); 
$(document).on('click', '.editable-cancel, .editable-submit', function() { 
    $('.edit').show(); 
}); 

скрипку:https://jsfiddle.net/trex005/3oy60m31/

Answer 2

Так как вы хотите, чтобы выбрать элемент, который является родителем элемента beign щелкнул вы можете использовать .closest() пройти вверх по DOM и найдите первый элемент, который соответствует вашему селектору. Что-то вроде этого:

$('.edit').click(function(e){ 
    var update_field=$(this).closest('.updateField'); 
    //now you have the element you want so you can do whatever you want with it 
    var inputName =update_field.attr('name'); 
    update_field.editable('toggle'); 
     ........ 
     }); 

Answer 3

Вы должны сделать свой код работать для каждого .updatefield отдельно.

$(function() { 

    $.fn.editable.defaults.mode = 'inline'; 
    $.fn.editable.defaults.params = function(params) { 
    params._token = $("#_token").data("token"); 
    return params; 
    }; 

    $('.updateField').each(function() { 

    var currentUpdateField = $(this); 
    var dataURL = currentUpdateField.data('url'); 
    var inputName = currentUpdateField.attr("name"); 

    currentUpdateField.editable({ 
     type: 'text', 
     url: dataURL, 
     name: inputName, 
     placement: 'top', 
     title: 'Enter public name', 
     toggle: 'manual', 
     send: 'always', 
     ajaxOptions: { 
     dataType: 'json' 
     } 
    }); 

    currentUpdateField.closest('.input-group').on('click', '.edit', function(e) { 
     console.log(inputName); 
     e.stopPropagation(); 
     currentUpdateField.editable('toggle'); 
     $(this).hide(); 
    }); 

    }); 

    $(document).on('click', '.editable-cancel, .editable-submit', function() { 
    $('.edit').show(); 
    }) 

}); 

---

Главное помнить, что методы JQuery, которые возвращают некоторое значение, будут возвращать только заявленное значение первого элемента в наборе (набора быть элементами в объекте JQuery).

Так что, когда вы выполняете $('.updateField') он будет возвращать все элементы с этим классом, но когда вы делаете $('.updateField').data('url') вы получите обратно url первый .updateField в DOM.