JQueryで動的生成のスライダが動くようにしたい

解決済

質問者：gaiaxgaiax
質問日時：2012/10/28 17:58
回答数：2件

すみません。JQueryで
multipleスライダのページを作っています。

「GO!」ボタンを押すごとに、動的にスライダフレームが生成され、
それぞれのsliderが動くようにしたいです。

しかし、「GO!」ボタンを押して生成されたスライダは動かず、デフォルトで表示されていたスライダだけが動く状態です。

また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか？
お手数おかけしますが、もしわかればご教授願います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2012/10/30 15:04

ANo1です。

jauery-uiのコードはわからないので、理解していないままの回答ですが…

＞全てのスライダがデフォルトの状態に戻ってしまいます。
全部のスライダーを初期化してませんか？

＞$( "#eq > div > span" ).each(function() { ～～
をその都度実行しているとすれば、対象がその時に存在する要素全部になっているので、全て初期化されてしまいます。
実際には、初期化されるだけでなくイベントの二重設定になっていたりする可能性もあります。

ご提示のコードはわからないので、単純化した例を作成しました。
理由としくみを理解してみてください。

*要素にホバーすると、要素が移動し、そのたびに横幅が少しずつ大きくなるようにしてあります。
*最初の設定関数では、動作を設定すると同時に要素の幅を60pxに初期化しています。
「コメントアウトすると～」の行を無効化すると、ご質問のように、要素が追加されるだけの状態になります。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">

</script>
</head>
<body>

<p>
<input id="create" type="button" value="create">
</p>

<ul id="hoge">
<li><div>test</div></li>
<li><div>test</div></li>
</ul>

</body>
</html>

この回答への補足

これは行けそうですね。試してみます。ありがとうございます。

補足日時：2012/10/30 21:42

通報する

- 0
- 件

通報する

この回答へのお礼

<STYLE>
#eq div span {
width:100px; float:left; margin:15px
}
#eq div {
width:100px; float:left; margin:15px
}
.color{
background:#669999;
}
</STYLE>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jque … />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></ …
<script type="text/javascript">
load();
function load(){
var span = document.getElementsByTagName("span");
if (span != null) {
for (i = 0; i < span.length; i++) {
changeColor(span[i], "color" + (i+1));
}
}
}
function changeColor(elements, colorId) {
var red = elements.slider( "value" ) * 100,
green = 180,
blue = 180,
hex = hexFromRGB( red, green, blue );
$( "#" + colorId ).css( "background-color", "#" + hex );

}

function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}

// output actual $("#eq").html()
function warm()
{
fid("output").innerHTML = fid("eq").innerHTML.replaceAll("<", "<").replaceAll(">", "><br/>");
}

// output document.body.innerHTML
function warm2()
{
fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", "><br/>");
}

// replace org to dest in expression.
String.prototype.replaceAll = function (org, dest){
return this.split(org).join(dest);
}

// return document.getElementById(id)
function fid(id){
return document.getElementById(id);
}

// replace org to dest in expression
function replaceAll(expression, org, dest){
return expression.split(org).join(dest);
}

// output the slider HTML
var cnt = 1;
var sample = '<DIV style="position:absolute;top:%top%px;left:100px;border:black 1px solid;background:#69BBBB;" id="color%cnt%">';
sample += 'test<SPAN id="s%cnt%" class="ui-slider ui-widget ui-widget-content ui-corner-all ui-slider-horizontal" sizcache06150691335632016="2 3 1" jQuery182023679669074682297="%cCnt%" rel="1" sizset="true" sizcache047932779737654934="59 19 422" jQuery18204489214198968289="%jCnt%">';
sample += '<DIV style="WIDTH: 0%" class="ui-slider-range ui-widget-header ui-slider-range-min"></DIV>';
sample += '<A style="LEFT: 0%" id=a%cnt% class="ui-slider-handle ui-state-default ui-corner-all" href="file:///C:/Users/Administrator/Desktop/sliders.html#" jQuery182023679669074682297="%csCnt%" jQuery18205026261943648269="%jsCnt%">';
sample += '</A>';
sample += '<DIV style="WIDTH: 0%; OVERFLOW: hidden" class="ui-slider-range ui-widget-header ui-slider-range-min">';
sample += '</DIV>';
sample += '</SPAN>';
sample += '<P></P>';
sample += '</DIV>';

$(function(){
$("#eq > div > span").each(function(){
init(this);
});

$("#create").click(function(){
var temp = sample;
var temp = temp.replaceAll("%cnt%", cnt);
var temp = temp.replaceAll("%jCnt%", cnt * 12 + 6);
var temp = temp.replaceAll("%cCnt%", (cnt+1) * 12 - 2);
var temp = temp.replaceAll("%jsCnt%", cnt * 12 + 2);
var temp = temp.replaceAll("%csCnt%", (cnt+1) * 12 - 6);
var temp = temp.replaceAll("%top%", cnt * 100);
//alert(temp);
var elm = $(temp);
$("#eq").append(elm);
init($("#s" + cnt));
cnt++;
});

function init(elm){
var value = parseInt( elm.attr("rel"), 10 );
elm.slider({
value: value,
orientation: "horizontal",
range: "min",
min: 1,
max: 2,
animate: true,
slide: function(event, ui) {
id = $(this).attr("id").replaceAll("s", "");
changeColor(elm, "color" + id);
},
change: function(event, ui) {
id = elm.attr("id").replaceAll("s", "");
changeColor(elm, "color" + id);
}
});
}
});
</script>
<DIV id="eq">
</DIV>

<div align="center">
<input id="create" type="button" value="create">
<FORM>
<INPUT onclick="warm()" name="button" value="src" type="button">
<INPUT onclick="warm2()" value="body" type="button">
<DIV id="output"></DIV>
<DIV id="output2"></DIV>
</FORM>
</div>
こちらでできました。4000文字の関係でインデントがない件はお許しください。ありがとうございました。

通報する

お礼日時：2012/10/31 22:22

No.1

回答者： fujillin
回答日時：2012/10/29 22:05

jQueryもよく知らない上にjquery-uiはまったく知らないので、内容はほとんど理解していませんが…

多分、
＞$( "#eq > div > span" ).each(function() {
の中でスライダーの設定をしていると思いますが、これが実行される（最初の）タイミングでは、当然ながら後から生成されるスライダーは存在していませんので設定の対象外になっていますよね？

それなので、後から要素としては生成されてもスライダーとして機能しないのではないでしょうか？

動的に生成した時に、その要素についてスライダーとしての定義を行なってあげれば動作すると想像します。

（私の見落としでどこかで設定していたら、別の原因ですのでスルーしてください）

この回答への補足

ご回答ありがとうございます。

http://success.net-c.net/jquery/sliders.html

こちらのスライダのページのように、動的に

// setup graphic EQ
$( "#eq > div > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).attr("rel"), 10 );
//var value = parseInt( $( this ).text(), 10 );
$(this).slider({
value: value,
orientation: "horizontal",
range: "min",
min: 1,
max: 2,
animate: true,
slide: function(event, ui) {
id = $(this).attr("id").replaceAll("s", "");
changeColor($(this), "color" + id);
},
change: function(event, ui) {
id = $(this).attr("id").replaceAll("s", "");
changeColor($(this), "color" + id);
}
});
$(this).draggable({
});
});

が呼ばれるようにしてみたんですが、いくつかスライダを生成させた後、どれかスライダを動かしてから、さらに「GO!」をクリックすると、全てのスライダがデフォルトの状態に戻ってしまいます。
動かしているほうのスライダは「GO!」を押してもそのままの状態にするにはどうすればいいか、もしわかればご教授お願い致します。