• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:クリックで配列に追加する方法)

クリックで配列に追加する方法

このQ&Aのポイント
  • 画像をクリックすることで、配列を追加させたい場合どのように記述すれば良いでしょうか。
  • 更新ごとにjsファイルの配列を追加する必要があるが、html側だけの変更で更新させたい。
  • 配列の追加を行う際に、クリックイベントとCookieを使用する方法があります。

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

  • ベストアンサー
回答No.1

<a href="#" id="BBB">BBB</a> <a href="#" id="AAA123">123</a> <a href="#" id="AAA456">456</a> <script> var zzz=[]; $('a[id^="AAA"]').click(function(){ var val=this.id.replace('AAA',''); if($.inArray(val,zzz)==-1){ zzz.push(val); alert(zzz); } }); </script> こんな感じ?

tabibito09
質問者

お礼

回答ありがとうございました。 出来ました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 10000から99999までの変数を簡単に表記する

    10000から99999までの変数の部分を簡単に表記したいのですが、どのようにすればよいかわかりません。 簡単に表記する方法を教えてください。 出来るだけ処理に時間がかからない方法をよろしくお願いいたします。 ーーーーーーーーーーーーーーーー var zzz = [ 10000,10001,10002,10003,10004,10005,10006,・・・・,99999]; $.each(zzz,function(i, aaa){ if($.cookie('AAA')=="AAA_DATA"+aaa){ $(function(){ $("a#AAA img").attr("src","images/img_"+aaa+".jpg"); })} $(function(){ $("a#AAA_BTN"+aaa).click(function() { $("a#AAA img").attr("src","images/img_"+aaa+".jpg"); $.cookie("AAA","AAA_DATA"+aaa);}); }) })

  • サムネイル画像のclass切替がうまく動かない。

    すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。

  • jQueryでセレクタに複数のIDを指定する方法

    助けてください。 今jQueryでボタンを押すと画像を切り替えるものを作成しています。 画像を表示しているところは <div id="contents"> <div id="contentsleft"> <img src="./imgs/aaa1.jpg" alt="ホーム"> </div> </div> となっていて、ボタンを押す処理のところに jQuery(document).ready( function() { $("button#btn01").click(function(){ $("img#contentsleft").attr("src", "./imgs/aaa2.jpg"); }); としていますが画像が切り替わりません。 $("img#contentsleft")のところのセレクタが間違っているのでしょうか? 指定方法のご教授をお願いいたします。

  • 画像をフェードアウト&フェードインで切り替えたい

    jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){  $("#cat-list a").click(function(){   $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text());   $("p#cat-name").text($(this).text());   return false;  }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list">  <li><a href="images/cat01.jpg">ネコ1</a></li>  <li><a href="images/cat02.jpg">ネコ2</a></li>  <li><a href="images/cat03.jpg">ネコ3</a></li>  <li><a href="images/cat04.jpg">ネコ4</a></li>  <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。

  • jQueryで、フェイドイン・フェイドアウトを追加

    fullscreenのはできたのですが、そこからのフェイドインをしてフェイドアウトをしていく仕組みを作ろうと思っていたのですが、そこだけがどうしても組み込めずにいるので助けていただけませんんでしょうか。 色々スクリプトを合体させてみたらりしてみました。 止む終えなく挫折してしまいました。 // 画像の配列を作成 var images = [ "img_001.jpg", "img_002.jpg", "img_003.jpg" ]; // 指定画像をプリロードする $(images).each(function(){ $('<img/>')[0].src = this; }); var index = 0; // 背景をコール。下記の場合、500ミリ秒で呼び出します。 $.fullscreen(images[index], {speed: 500}); setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.fullscreen(images[index]); }, 5000);

  • jqueryについて(v 1.4.2)

    jqueryについて(v 1.4.2) <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。

    • ベストアンサー
    • AJAX
  • JS switch文について

    JavaScript初心者です。 下記では、div内でphoto1.jpgを表示していますが、ここが別のコードで他の画像に書き換えられるため、下のjsで、画像がクリックされた際にsrcの中身を確認し、それに応じてアンカータグのhrefを書き換えようとしています。 ですが、参照の仕方が悪いのか、switch文が思惑通りに動いてくれません。 どなたか詳しい方、ご教授ください。よろしくお願いいたします。 $("#main a").click(function(){ var mimage = document.getElementById("main-img"); switch(mimage.src){ case "images/photo1.jpg": $("#main a").attr("href","sub1.html"); break; case "images/photo2.jpg": $("#main a").attr("href","sub2.html"); break; case "images/photo3.jpg": $("#main a").attr("href","sub3.html"); break; } }); <div id="main"> <a href="sub1.html"><img src="images/photo1.jpg" alt="" width="700" height="515" id="main-img" /></a> </div>

  • 配列をfunctionに渡す方法

    画像プレロードのjQueryを書いているのですが、うまく動いてくれません。 最後の行の、preloadImg(preloadImgList);の箇所での渡し方が失敗しているのですが、 変数に入れた配列を、関数に渡すことはできないでしょうか。 preloadImg("a","b","c")というかたちにして、直接引数の部分を記述すると動作するのですが、配列の格納された変数にすると、1つの文字列として渡されるようなのです。 ====================================== function preloadImg(){ for(var i = 0; i<arguments.length; i++){ $("<img>").attr("src", arguments[i]); } } $('a.modal').each(function(){ preloadImgList.push($(this).attr('href')); }); preloadImg(preloadImgList); ======================================

  • cookie.jsを使ってクッキーを利用する方法。

    cookie.jsを使ってクッキーを利用する方法。 現在ジャバスクリプトにて、複数の画像、リンク、位置データがonClickで変わるように設定しています。 違うページに行き戻ると、置き換えられた画像のデータがなくなってしまいます。 cookie.jsを使えばいいと思い、その設定方法をいろいろと調べてみましたがわかりませんでした。 こういう場合は、ジャバスクリプトをどのように記入すれば良いのでしょうか。 よろしくお願いいたします。 <body> <a href="http://www.a01"> <img name="AAA" id="AAA" src="images/a01.jpg" style="position: absolute; top: 310px; left: 220px; z-index: 45;" border="0" /></a> <a href="http://www.b01"> <img name="BBB" id="BBB" src="images/b01.jpg" style="position: absolute; top: 227px; left: 363px; z-index: 120;" border="0" /></a> <a href="http://www.c01"> <img name="CCC" id="CCC" src="images/c01.jpg" style="position: absolute; top: 418px; left: 425px; z-index: 120;" border="0" /></a> <form> <input value="" title="clear" style="background: transparent url(images/clear.gif) no-repeat;" onclick="document.AAA.src='images/spacer.gif';document.links[0].href='#';" type="button" /> <div class="AAA"> <a href="#" class="prev_AAA">戻る</a> <a href="#" class="next_AAA">進む</a> <ul> <li> <input value="" title="" style="background: transparent url(images/a01.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a01.jpg';document.links[0].href='http://www.a01'" type="button" /> </li> <li> <input value="" title="" style="background: transparent url(images/a02.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a02.jpg';document.links[0].href='http://www.a02'" type="button" /> </li> </ul></div> ……………… </form></body>

  • クリックでクリッカブルマップの色が変化する処理

    クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。 過去の質問も参考にさせて頂いたのですが、思うように作動してくれないので、質問を立てさせて頂きました。 HTML JQueryコードを下記に記します。 <HTML> <div id="click"> <img src="../../Images/kousi2-0.png" usemap="#sikaku" width="400px" height="400px" alt="map" class="metermap"/> <map name="sikaku"> <area shape="rect" coords="19,22,89,91" alt="map1" id="clickmap1" /> <area shape="rect" coords="94,22,161,91" alt="map1" id="clickmap2" /> <area shape="rect" coords="166,22,235,91" alt="map1" id="clickmap3" /> </map> </div> <JQuery> //クリッカブルマップの切り替え処理 $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-1.png"); $("#click img").attr("src",onsrc); }); }); $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-2.png"); $("#click img").attr("src",onsrc); }); }); $(document).ready( function () { $("#clickmap1").click(function () {; var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-3.png"); $("#click img").attr("src",onsrc); }); }); これで画像は切り替わるのですが、所定の場所に画像が移動してくれません。 今使用している格子の画像で説明すると、クリックで出現する赤の四角が、格子の左上から右下に移動してくれないといった感じです。 replaceで置き換えているだけなので、その場所しか切り替わらないのは当然ですが、 解決策が見えてきません。 有効なJQueryのライブラリなどございましたら、ご紹介頂けると幸いです。 よろしくお願いいたします。 ご教授のほど、よろしくお願いいたします。