QA@IT
«質問へ戻る

全角スペースは参考にした人がエラーとなるため、バッククォート三連またはチルダ三連を使用しましょう。

5639
本文
 ---------------------------------
 
 動くようになったソースを貼り付けます。
+~~~ html
 <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 );
+    <!--
+    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("<", "&lt;").replaceAll(">", "&gt;<br/>");
-  }
-  
-  // output document.body.innerHTML
-  function warm2()
-  {
-    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<br/>");
-  }
-  
-  // replace org to dest in expression.
-  String.prototype.replaceAll = function (org, dest){   
-    return this.split(org).join(dest);   
-  }
+    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();
+    }
 
-  // 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 actual $("#eq").html()
+    function warm()
+    {
+        fid("output").innerHTML = fid("eq").innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<br/>");
+    }
 
-  // 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);
-     });
+    // output document.body.innerHTML
+    function warm2()
+    {
+        fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<br/>");
+    }
 
-    // 新しく要素を追加(動作を設定)
-     $("#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++;
-     });
+    // replace org to dest in expression.
+    String.prototype.replaceAll = function (org, dest){
+        return this.split(org).join(dest);
+    }
 
-    // 要素に初期サイズと動作を設定する関数
-     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);
-        }
-      });
-     }
-  });
-//-->
+    // 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>
+~~~

jQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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


動くようになったソースを貼り付けます。

<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
    }

    // output document.body.innerHTML
    function warm2()
    {
        fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>
すみません。jQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます[.](http://astore.amazon.co.jp/rainboots0b-22)

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[.](http://astore.amazon.co.jp/botol-22)


---------------------------------

動くようになったソースを貼り付けます。
~~~ html
<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
    }

    // output document.body.innerHTML
    function warm2()
    {
        fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>
~~~

WYSWIG

18
本文
 
 しかし、「GO!」ボタンを押して生成されたスライダは動かず、デフォルト表示のスライダだけが動く状態です。
 
-また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。
+また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます[.](http://astore.amazon.co.jp/rainboots0b-22)
 
 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
 お手数おかけしますが、もしわかればご教授願います[.](http://astore.amazon.co.jp/botol-22)

jQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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


動くようになったソースを貼り付けます。

<!--
  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(">", ">");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", ">");
  }
  
  // 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 = '';
  sample += '  test';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '  ';
  sample += '  ';
  sample += '';
  
  $(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);
        }
      });
     }
  });
//-->

すみません。jQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます[.](http://astore.amazon.co.jp/rainboots0b-22)

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[.](http://astore.amazon.co.jp/botol-22)


---------------------------------

動くようになったソースを貼り付けます。
<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>

linkテスト

18
本文
 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。
 
 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
-お手数おかけしますが、もしわかればご教授願います.
+お手数おかけしますが、もしわかればご教授願います[.](http://astore.amazon.co.jp/botol-22)
+
 
 ---------------------------------
 

jQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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


動くようになったソースを貼り付けます。

<!--
  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(">", ">");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", ">");
  }
  
  // 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 = '';
  sample += '  test';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '  ';
  sample += '  ';
  sample += '';
  
  $(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);
        }
      });
     }
  });
//-->

すみません。jQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

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

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[.](http://astore.amazon.co.jp/botol-22)


---------------------------------

動くようになったソースを貼り付けます。
<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>

編集ありがとうございます。このように書けばよかったのですね。無関係なリンクは、リンクのはり方をテスト仕様としていて残ってしまってました。失礼しました

18
本文
 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。
 
 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
-お手数おかけしますが、もしわかればご教授願います。
+お手数おかけしますが、もしわかればご教授願います.
+
+---------------------------------
+
+動くようになったソースを貼り付けます。
+<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
+  }
+  
+  // output document.body.innerHTML
+  function warm2()
+  {
+    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>

jQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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


動くようになったソースを貼り付けます。

<!--
  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(">", ">");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", ">");
  }
  
  // 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 = '';
  sample += '  test';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '  ';
  sample += '  ';
  sample += '';
  
  $(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);
        }
      });
     }
  });
//-->

すみません。jQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

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

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

---------------------------------

動くようになったソースを貼り付けます。
<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>

JQueryではなくjQueryが正式な名称です。それと文末にあるリンクが本文に無関係に思えたので削除しました

1138
タイトル
JQueryでボタンを押すごとに複数のSliderを生成
jQueryでボタンを押すごとに複数のSliderを生成
本文
-すみません。JQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。
+すみません。jQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。
 
 「GO!」ボタンを押すごとに、動的にスライダフレームが生成され、
 それぞれのスライダが動くようにしたいです。
 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。
 
 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
-お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)
-
----------------------------------
-
-動くようになったソースを貼り付けます。
-<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
-  }
-  
-  // output document.body.innerHTML
-  function warm2()
-  {
-    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>
+お手数おかけしますが、もしわかればご教授願います。

jQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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

すみません。jQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

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

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

HTMLがなんか表示されないので修正

18
本文
 ---------------------------------
 
 動くようになったソースを貼り付けます。
-<!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>
-#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/jquery-ui.css" />    
-<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>
 <script type="text/javascript">
 <!--
   load();
   });
 //-->
 </script>
-</head>
-<body>
-
-<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>
-</body>
-</html>

JQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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


動くようになったソースを貼り付けます。

<!--
  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(">", ">");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", ">");
  }
  
  // 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 = '';
  sample += '  test';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '  ';
  sample += '  ';
  sample += '';
  
  $(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);
        }
      });
     }
  });
//-->

すみません。JQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

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

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)

---------------------------------

動くようになったソースを貼り付けます。
<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>

動作検証後のソースの追加

18
本文
 
 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
 お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)
+
+---------------------------------
+
+動くようになったソースを貼り付けます。
+<!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>
+#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/jquery-ui.css" />    
+<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>
+<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
+  }
+  
+  // output document.body.innerHTML
+  function warm2()
+  {
+    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>
+</head>
+<body>
+
+<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>
+</body>
+</html>

JQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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


動くようになったソースを貼り付けます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

test



#eq div span {
  width:100px; float:left; margin:15px
}
#eq div {
  width:100px; float:left; margin:15px
}
.color{
  background:#669999;
}







<!--
  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(">", ">");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "<").replaceAll(">", ">");
  }
  
  // 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 = '';
  sample += '  test';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '    ';
  sample += '  ';
  sample += '  ';
  sample += '';
  
  $(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);
        }
      });
     }
  });
//-->

  
  
    
    
    
    
  

すみません。JQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

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

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)

---------------------------------

動くようになったソースを貼り付けます。
<!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>
#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/jquery-ui.css" />    
<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>
<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("<", "&lt;").replaceAll(">", "&gt;<br/>");
  }
  
  // output document.body.innerHTML
  function warm2()
  {
    fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<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>
</head>
<body>

<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>
</body>
</html>

javascriptを追加

18
本文
 「GO!」ボタンを押すごとに、動的にスライダフレームが生成され、
 それぞれのスライダが動くようにしたいです。
 
-しかし、「GO!」ボタンを押して生成されたスライダは動かず、押してないほうのスライダだけが動く状態です。
+しかし、「GO!」ボタンを押して生成されたスライダは動かず、デフォルト表示のスライダだけが動く状態です。
 
 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。
 
タグ

JQueryでボタンを押すごとに複数のSliderを生成

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

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

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

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

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

すみません。JQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

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

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

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)

タグの追加

18
タグ

JQueryでボタンを押すごとに複数のSliderを生成

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

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

しかし、「GO!」ボタンを押して生成されたスライダは動かず、押してないほうのスライダだけが動く状態です。

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

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

すみません。JQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

しかし、「GO!」ボタンを押して生成されたスライダは動かず、押してないほうのスライダだけが動く状態です。

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

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)

質問を投稿

JQueryでボタンを押すごとに複数のSliderを生成

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

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

しかし、「GO!」ボタンを押して生成されたスライダは動かず、押してないほうのスライダだけが動く状態です。

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

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

すみません。JQueryで[multipleスライダのページ](http://net-c.net/jquery/sliders.html)を作っています。

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

しかし、「GO!」ボタンを押して生成されたスライダは動かず、押してないほうのスライダだけが動く状態です。

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

なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか?
お手数おかけしますが、もしわかればご教授願います[。](http://astore.amazon.co.jp/ski0a-22)