Birden çok gizli alana kaydetme görünümü

Question

ASP.NET MVC kullanıyorum. Ben görünümü

<div class="slider" data-hiddenfield="amount" style="width:200px;"></div> 

üç jquery kaydırıcıları sahip ve değerindeki gizli html alanlarını eşlik eden db kurtaracak.

@Html.HiddenFor(model => model.fear, new { @id = "cvar" }) 
@Html.HiddenFor(model => model.control, new { @id = "cvar" }) 
@Html.HiddenFor(model => model.danger, new { @id = "dvar" }) 

o biçim sunulmadan önce, aynı JavaScript kodu kullanabilirsiniz ve dinamik üç gizli alanlara kaydırıcı değerini kaydetmek mümkün mü?

Slider JavaScript:

$(document).ready(function() { 
$(function() { 
    $(".slider").slider({ 
     orientation: "Horizontal", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function (event, ui) { 
      $("#cvar").val(ui.value); //to be saved to hidden field 
      var g = parseInt(ui.value <= 50 ? 255 : 255 - ((ui.value - 50) * (255/50))); 
      var r = parseInt(ui.value >= 50 ? 255 : 255 - ((50 - ui.value) * (255/50))); 
      $(".ui-widget-header").css("background", "rgb(" + r + "," + g + ",0)"); 
     }, 

     create: function (event, ui) { 
      $(".ui-widget-header").css("background", "rgb(255, 200 ,0)"); 
     } 
    }); 
}); 

Answer 1

Öncelikle gizli girişler benzersiz sınıf vermelidir. Eğer gizli alan okuma özelliği ve uygun girişin değerini ayarlayabilirsiniz kaydırıcı slide işleyicisinde Sonra

<div class="slider" data-hiddenfield="fear" style="width:200px;"></div> 
<div class="slider" data-hiddenfield="control" style="width:200px;"></div> 
<div class="slider" data-hiddenfield="danger" style="width:200px;"></div> 

@Html.HiddenFor(model => model.fear, new { @id = "fear" }) 
@Html.HiddenFor(model => model.control, new { @id = "control" }) 
@Html.HiddenFor(model => model.danger, new { @id = "danger" }) 

: Daha sonra ilgili girişin kimliği eşleşecek şekilde kaydırıcıdaki data-hiddenfield niteliğini düzeltebileceksiniz böyle: Ben efekt oBV yapmak için görünür metin alanlarını kullanılan örnekte

slide: function (event, ui) { 
    $('#' + $(event.target).data('hiddenfield')).val(ui.value); 
    var g = parseInt(ui.value <= 50 ? 255 : 255 - ((ui.value - 50) * (255/50))); 
    var r = parseInt(ui.value >= 50 ? 255 : 255 - ((50 - ui.value) * (255/50))); 
    $(event.target).find(".ui-widget-header").css("background", "rgb(" + r + "," + g + ",0)"); 
}, 

Working example

Bu arada, gizli girişlerle kesinlikle iyi çalışır.

Ayrıca, değiştirilmekte olanın yerine değiştirilmekte olan tüm çubuk renklerinin sorununu gidermek için olay hedefinden find() kullanımını not edin.

Answer 2

Öncelikle, tüm giriş alanlarının aynı id değerine vermeyin. Kimlik elemanlar için benzersiz olmalıdır. İki öğe aynı Kimlik değerine sahip olmamalıdır. Html.HiddenFor yardımcı metodu, giriş alanınız için model/özellik meta bilgisinden bir Id ve name üretecektir.

Tüm gizli alanlar için aynı css sınıf adını verin.

@Html.HiddenFor(model => model.fear, new { @class= "myClass" }) 
@Html.HiddenFor(model => model.control, new { @class= "myClass" }) 
@Html.HiddenFor(model => model.danger, new { @class= "myClass" }) 

Şimdi javascript jQuery seçici olarak css sınıfını kullanın ve değerini ayarlayabilirsiniz. Tek bir belgede yinelenen id nitelikleri geçersiz olarak

$(".myClass").val(ui.value);