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')を行うときには、DOMの最初の.updateFieldのurlを取り戻すだろう。