эффективное отражение значений с .on()

У меня есть две таблицы. Я хочу отразить значения из одной таблицы в другую. Текущая реализация у меня такова:эффективное отражение значений с .on()

<script type="text/javascript"> 
     $("#textfield1, #textfield2, #textfield3, #select1").on("keyup keypress blur click change", function(event){   
      $("input[type='text']#copytextfield1").val($("[type='text']#textfield1").val()); 
      $("input[type='text']#copytextfield2").val($("[type='text']#textfield2").val()); 
      $("input[type='text']#copytextfield3").val($("[type='text']#textfield3").val()); 
      $("input[type='text']#copytextfield4").val($("select#select1").val());   
     });   
    </script>

как вы можете видеть, имена очень похожи. Единственное отличие состоит в том, что элементы зеркалирования имеют «копию». можете ли вы предложить способы сделать это более эффективным? возможно, воспользоваться конкретизацией имен?

источник

2012-06-30 user571099

'# copytextfield4' отображение в' # select1' делает его труднее реорганизовать это в петлю. Существуют ли другие особые случаи? Кроме того, вам не нужны 'input [type = 'text']' или 'select' перед выборами id, это фактически делает ваш код менее удобочитаемым * и * менее эффективным. –

Я добавил только вход [type = 'text'] и выбираю, потому что я смутно помню, что добавление их на самом деле делает его более эффективным. Нет, я не уверен, что я читаю. можете ли вы направить меня на некоторые ссылки, говорящие наоборот? – user571099

Конечно, [документация для выбора идентификатора] (http://api.jquery.com/id-selector/), первый абзац в разделе «Описание». Вполне логично: '# foo' только должен соответствовать' id', 'something # foo' также должен проверять элемент против селектора' something'. –

Это может быть сделано, как это:

<script type="text/javascript"> 
     $("#textfield1, #textfield2, #textfield3, #select1").on("keyup keypress blur click change", function(event){ 
      for (var i = 1; i <= 3; i++) { 
       $("#copytextfield" + i).val($("#textfield" + i).val()); 
      } 
      $("input[type='text']#copytextfield4").val($("select#select1").val());   
     });   
    </script>

Идентификатор избранных вызывает некоторые проблемы, так что если вы измените идентификатор всех полей что-то вроде input1 - INPUT4 вместо этого, он может быть переработан даже больше.

<script type="text/javascript"> 
     $("#input1, #input2, #input3, #input1").on("keyup keypress blur click change", function(event){ 
      for (var i = 1; i <= 4; i++) { 
       $("#copytextfield" + i).val($("#input" + i).val()); 
      }  
     });   
    </script>

источник

2012-06-30 12:17:05

спасибо. Я никогда не знал, что переменные javascript можно обрабатывать следующим образом: – user571099

@ user571099 Счастлив, что это помогло! Селектор jQuery - это простая строка JavaScript, поэтому вы можете создать ее так, как хотите, и она будет конкатенирована до ее отправки в функцию jQuery. –

Пожалуйста, попробуйте это: сделал демо для вас, а также:http://jsfiddle.net/6hwLS/4/

Идея заключается в том, чтобы принять числовое значение из конца и использовать их с $(this) объекта:

Также вы не нужны input[type='text'] или select как id являются уникальными и идентифицируют элементы DOM уникально.

Надеется, что это помогает, :)

так:

$("#textfield1, #textfield2, #textfield3, #select1") 
    .on("keyup keypress blur click change", function(event) { 

     var theNum = parseInt($(this).attr("id").match(/\d+$/)); // will return last numeric value 

     $("#copytextfield"+theNum).val($("#textfield"+theNum).val());  
     if(theNum === 4) { 
      $("#copytextfield"+theNum).val($("#select1").val()); 
     } 
});

источник

2012-06-30 12:17:15

эффективное отражение значений с .on()

ответ

Смежные вопросы