Wie kann ich Panel-Namen per Javascript erhalten?

Question

Ich möchte einen Panel-Namen von Javascript erhalten, die erweitert wird. Ich zeige eine Liste von Panel dynamisch von @ item.Name.Wenn ich eine von ihnen erweitern, habe ich versucht, den erweiterten Panel-Namen durch ... var panelId = $ ("# collapse") .attr ("Name"); Aber ich habe nur den ersten Namen des Panels.

Erstens würde ich sagen, ich möchte Datei von Ajax an den Controller mit einem Parameter eines Panel-Namen eines erweitern Panel senden. Jetzt will ich Panel-Namen in Summit-Funktion und dann an den Controller übergeben.

Index

<div class="panel panel-info class" style="height: 450px; width: 300px; overflow-y:scroll;"> 
     @foreach (var item in lstCategory) 
     { 
      <div class="panel-heading" id="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" onclick="collapse(@item.Id);" name="@item.Name" id="collapse" href="#@item.Id">@item.Name</a>      
       </h4> 
      </div> 

     <div id="@item.Id" class="panel-collapse collapse in"> 
      <div id="file_@item.Id"> 
      </div> 
     </div> 

     }  
</div> 
<form id="form" name="form" enctype="multipart/form-data" method="post"> 
      @*<label class="btn btn-block btn-primary"> 
       Browse &hellip; <input type="file" name="file" class="filestyle" id="file" style="display: none;" /> 
      </label>*@ 
      <span class="btn btn-default btn-file" id="browse"style="width:100%;"> 
       <input type="file" name="file" class="filestyle" id="file" /> 
      @*<input type="file">*@ 
      </span> 
      <input type="submit" name="Submit" class="btn" id="Submit" value="Submit" style="width:100%;margin-top:5px;" disabled> 
     </form> 

Javascript

var panelId = $("#collapse").attr("name"); 
     alert("Panel name :" + panelId); 


    $(document).ready(function (e) { 
    $('#Submit').click(function (event) { 


     var file = $("file").data(); 
     var panelId = $("#collapse").attr("name"); 
     alert("Panel name :" + panelId); 
     var formData = new FormData(); 
     var totalFiles = document.getElementById("file").files.length; 
     for (var i = 0; i < totalFiles; i++) { 
      var file = document.getElementById("file").files[i]; 

      formData.append("file", file); 
     } 
     alert(file); 
      $.ajax(
     { 
      url: '@Url.Action("Upload","Document")', 
      type: "POST", 
      data: { file: formData, Id: panelId },//{ file: formData, value: dam },//formData, 
      processData: false, 
      contentType: false, 
      success: function (response) { 
       console.log(response); 
      }, 
      error: function (error) { 
       console.log(error); 
      }, 

     }); 
    }) 
}); 

Answer 1

Sie $ verwenden (diese) Name des aktiven Tag zu bekommen. ODER Sie können übergeben Name in Funktion anstelle von ID: onclick = "Kollaps (@ item.name);"

function collapse() 
{ 
    var itemName=$(this).attr("name") 
} 

Answer 2

Wollen Sie wirklich den Namen des Panels?

Sie können mit diese mit dem Parameter des Minimierungsfunktion, wie manipulieren:

onclick="collapse(this);" 

Also, Sie das übergeordnete div zugreifen können.

Es tut mir leid, aber Ihre Frage war nicht sehr klar für mich, weil ich nicht verstehe, was Sie tun müssen.

Wenn Sie ein wenig mehr erklären können, ist es eine Freude, Ihnen zu helfen.

UPDATE

Also, versuchen Sie diesen Code verwenden:

$(document).ready(function(){ 

    //I am moving your click to JQuery 
    $("#collapse").click(function(){ 

     //Clear last selected item 
     $("#collapse").each(function(){ 
      $(this).attr("data-selected", ""); 
     }); 

     //Mark the actual as selected 
     $(this).attr("data-selected", "yes"); 
    }); 

    //Now, update your actual submit to get the actual selected item 
    $('#Submit').click(function (event) { 
     var nameSelected = $("#collapse[data-selected=yes]").eq(0).attr("name"); 

     //rest of your code here... 
    }); 

});