嗨,我需要使用jQuery在輸入字段更改數據時,對一些鏈接更改輸入字段中的某些數據與jQuery
<input value="height-size-width">
使用戶點擊時,一些
<a href = "#" id="width">
用戶點擊鏈接只需要在輸入字段中更改widht ....
如果用戶點擊
<a href = "#" id="height">
鏈接腳本只需要改變高度輸入字段...
像YouTube嵌入選項 任何幫助嗎?
嗨,我需要使用jQuery在輸入字段更改數據時,對一些鏈接更改輸入字段中的某些數據與jQuery
<input value="height-size-width">
使用戶點擊時,一些
<a href = "#" id="width">
用戶點擊鏈接只需要在輸入字段中更改widht ....
如果用戶點擊
<a href = "#" id="height">
鏈接腳本只需要改變高度輸入字段...
像YouTube嵌入選項 任何幫助嗎?
<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生成嵌入代碼)
邑多數民衆贊成,我需要......謝謝;) – 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>
是的,但如果我有幾種類型的大小? 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>
我真的說不出這是什麼意思。 – Pointy 2010-06-05 11:04:43
歡迎來到SO。技術問題不需要「社區維基」複選框,僅適用於投票類型問題。你能澄清你的問題嗎?現在很難理解。 – 2010-06-05 11:10:18