更改输入字段中的某些数据与jQuery

嗨，我需要使用jQuery在输入字段更改数据时，对一些链接更改输入字段中的某些数据与jQuery

<input value="height-size-width">

使用户点击时，一些

<a href = "#" id="width">

用户点击链接只需要在输入字段中更改widht ....

如果用户点击

<a href = "#" id="height">

链接脚本只需要改变高度输入字段...

像YouTube嵌入选项任何帮助吗？

来源

2010-06-05 John

我真的说不出这是什么意思。 – Pointy 2010-06-05 11:04:43

欢迎来到SO。技术问题不需要“社区维基”复选框，仅适用于投票类型问题。你能澄清你的问题吗？现在很难理解。 – 2010-06-05 11:10:18

<input id="embed-code" size="60" /> 
<h3>Select size:</h3> 
<ul id="embed-size-options"> 
    <li><a href="#" data-width="640" data-height="480" class="selected">640x480</a></li> 
    <li><a href="#" data-width="800" data-height="600">800x600</a></li> 
    <li><a href="#" data-width="1024" data-height="768">1024x768</a></li> 
</ul> 

<h3>Select color:</h3> 
<ul id="embed-color-options"> 
    <li><a href="#" data-color="#ff0000" class="selected">red</a></li> 
    <li><a href="#" data-color="#00ff00">green</a></li> 
    <li><a href="#" data-color="#0000ff">blue</a></li> 
</ul> 

<script src="jquery-1.4.2.min.js"></script> 
<script src="sprintf-0.6.js"></script> 
<script> 
    $(function() { 
     var $embed_code = $('#embed-code'), 
      $embed_size_options = $('#embed-size-options'), 
      $embed_color_options = $('#embed-color-options'), 
      $selected_size = $embed_size_options.find('a.selected').eq(0), 
      $selected_color = $embed_color_options.find('a.selected').eq(0), 
      code_tpl = 'current width %s and height %s and color %s'; 
     if (!$selected_size) { 
      $selected_size = $embed_size_options.find('a').eq(0).addClass('selected'); 
     } 
     if (!$selected_color) { 
      $selected_color = $embed_color_options.find('a').eq(0).addClass('selected'); 
     } 
     generate_embed_code(); 

     $embed_size_options.find('a').click(function() { 
      $selected_size.removeClass('selected'); 
      $selected_size = $(this).addClass('selected'); 
      generate_embed_code(); 
      return false; 
     }); 
     $embed_color_options.find('a').click(function() { 
      $selected_color.removeClass('selected'); 
      $selected_color = $(this).addClass('selected'); 
      generate_embed_code(); 
      return false; 
     }); 
     function generate_embed_code() { 
      $embed_code.val(sprintf(code_tpl, $selected_size.attr('data-width'), $selected_size.attr('data-height'), $selected_color.attr('data-color'))); 
     } 
    }); 
</script>

这是你想要的吗？

（我用this JavaScript sprintf() implementation生成嵌入代码）

来源

2010-06-05 13:31:41 Oblio

邑多数民众赞成，我需要......谢谢;） – John 2010-06-05 13:58:09

YouTube不只是改变尺寸，但重写整个字符串...

所以，你需要保持每个属性在其自己的变量，只是重建整个价值..

的Javascript

var height = 500; // default value 
var width = 500; // default value 
var size = 500; // default value 

$(document).ready(function(){ 
    $('#dimensions').val(height + '-' + size + '-' + width); 

    // assuming that you put a different id to each a href (id : width or height or size) 
    // do the following for each button 
    $('#width').click(function(){ 
    width = 700; 
    $('#dimensions').val(height + '-' + size + '-' + width); 
    return false; 
    }); 
});

HTML

<input value="height-size-width" id="dimension"> 
<a href="#" id="width">change width</a>

来源

2010-06-05 11:16:18

是的，但如果我有几种类型的大小？ 100 200 300？那怎么样？ – John 2010-06-05 12:19:52

@约翰，只是在你的链接添加一个额外的属性..并使用它（*像oblio显示：）*） – 2010-06-05 17:35:49

可以使用split和join方法来获取值并将其重新组合在一起。例如：

<input type="text" id="data" value="178-4-56" /> 

<a href="javascript:var values=$('#data').val().split('-');values[0]=parseInt(values[0])+1;$('#data').val(values.join('-'));">increase height</a> 
<a href="javascript:var values=$('#data').val().split('-');values[1]=parseInt(values[1])+1;$('#data').val(values.join('-'));">increase size</a> 
<a href="javascript:var values=$('#data').val().split('-');values[2]=parseInt(values[2])+1;$('#data').val(values.join('-'));">increase width</a>

来源

2010-06-05 11:18:03 Guffa

更改输入字段中的某些数据与jQuery

回答

相关问题