同じjqueryを２つ並べて動かしたいけど動かない

2012/09/13 18:15

このQ&Aのポイント

同じjqueryを２つ並べて動かしたいけど、片方が動かない問題について解決方法を教えてください。
http://39kn.com/2011/06/05/5528/ のjqueryを横に並べて動かしたいですが、片方だけが動作しない問題が発生しています。
２つのスライダーデモを並べる際に、片方が動かない問題にどのように対処すればよいでしょうか？

同じjqueryを２つ並べて動かしたいけど動かない

いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。どうすれば動きますか？？理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> </body> </html>

01mk
お礼率62% (45/72)

JavaScript
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2012/09/13 20:14 回答No.1

＞同じjqueryを２つ並べて動かしたいけど動かないこれってjQueryではなくて、mootoolsではないのですか？ mootoolsは全然知りませんので、回答にはなりませんが… まずは、HTMLを見直してください。　・divの閉じタグの数があっていない。　・spanの中にdivがある。　・タグ同士が互い違いになって、入れ子関係になっていない。　・同じidの要素が複数以上存在する。などなど。ブラウザが無理やり解釈するでしょうから、結果がどうなるのか予想できません。（というか、HTMLとして成立していない）ほかにもいろいろありますので、一度（↓）などでチェックしてみるのがよろしいかと。 http://www.htmllint.net/en/html-lint/htmllint.html ＞横に並べて動かしたいのですがそれぞれのラッパー（例えばdiv要素）をフロートさせればよろしいかと。例えば div.wrapper { float : left; } <div> 　<div class="slider_wrapper"> 　　スライダー1の内容など　</div> 　<div class="slider_wrapper"> 　　スライダー２の内容など　</div> </div> とか・・・＞どうすれば動きますか？？スクリプトを読んだわけではないので、以下はあくまでも印象ですが… 多分、クラスを作っているように見受けられますので、別のインスタンスを作成することで複数の対象を制御することが可能なように作られているのではないでしょうか。しかしながら、ご提示のソースではみな同じidになっていますので、仮にそれでできるとしても、今のままでは識別できないため動かないと思われます。