Question

我需要用jQuery在用户点击某个链接时更改输入字段中的数据

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

所以当用户点击某些

时

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

链接只需要在输入字段中进行更改....

如果用户点击

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

链接脚本只需要在输入字段中更改高度...

喜欢youtube嵌入选项有什么帮助吗？

Answer 1

<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生成嵌入代码）

Answer 2

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>

Answer 3

您可以使用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>

使用jQuery更改输入字段中的一些数据

3 个答案: