Сохранение нескольких скрытых полей в поле зрения

Question

Я использую ASP.net MVC. У меня есть три ползунка jquery на вид

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

и сопутствующие скрытые html-поля, значение которых будет сохранено в db.

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

Можно ли использовать один и тот же код Javascript и сохранить значение ползунка динамически для всех трех скрытых полей, перед отправкой формы?

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

Во-первых, вы должны дать ваши скрытые входы уникальный класс как дублирующие id атрибуты в одном документе является недействительным. Вы можете изменить атрибут data-hiddenfield на ползунок, чтобы соответствовать идентификатор соответствующего входа:

<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" }) 

Затем в обработчике слайдер slide вы можете прочитать свойство скрытого поля и установите значение соответствующего входа , как это:

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

в примере я использовал видимые текстовые поля, чтобы сделать эффект OBV Тем не менее, он будет работать абсолютно нормально со скрытыми входами.

Также обратите внимание на использование find() от цели события, чтобы исправить проблему изменения всех цветов бара вместо той, которая исправляется.

Answer 2

Во-первых, не дают такое же значение идентификатора всех полей ввода. Идентификатор должен быть уникальным для элементов. Ни один из двух элементов не должен иметь одинаковое значение Id. Html.HiddenFor Вспомогательный метод будет генерировать Id и name для вашего поля ввода из мета/информации о модели/свойствах.

Дайте одинаковое имя класса css для всех скрытых полей.

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

Теперь в вашем JavaScript вы можете использовать класс CSS в качестве селектора JQuery и установите значение.

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