0

デフォルトの色をロードするカラーピッカーフィールドがあり、訪問者はカラーホイールまたはテキストを変更するだけで入力値を変更できます。カラーピッカーの値を取得し、その横にあるリンクの href をその値に設定する JavaScript があります。

問題は、ページが読み込まれると、カラーピッカーでリンク ボタンがデフォルト値に設定されますが、訪問者がこの値を変更しても、リンクの href が変更されず、更新しないとこれが反映されないことです。

ライブサイトはこちら: http://www.brainbuzzmedia.com/themes/vertex/

ここに私が持っているJavaScriptがあります:

<script type="text/javascript">
$(document).ready(function(){

var a = document.getElementById('colorLink');
var color = document.getElementById('color-demo').value;
a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;

});
</script>

そして、カラーピッカーの入力とリンクが追加された html は次のとおりです。

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onChange="refresh()"/><a href="" id="colorLink">LINK</
4

3 に答える 3

2

値が変更されるたびにそのコードを実行します

$("#color-demo").change(function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});
于 2012-06-24T05:07:34.477 に答える
0

テキストボックスのKeyUp、KeyDown、Blurイベントに値を設定してみてください。このように。

$("#color-demo").bind("keyup keydown blur",{},function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});
于 2012-06-24T05:16:51.060 に答える
0

document.getElementById("color-demo").onblur = function() {
var a = document.getElementById('colorLink');
var color = document.getElementById('color-demo').value;
a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + 色;
}

またはこれを行います：

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onchange="Refresh(this.value)"/>

function Refresh(color) {
var a = document.getElementById('colorLink');
a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + 色;
}

于 2012-06-24T05:07:01.017 に答える