質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.21%

表示中の画像srcを取得したい(javascript)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 544
退会済みユーザー

退会済みユーザー

【目的】

ボタンクリック時に、スライダーで表示中の画像srcを取得したいです。(>_<)

その画像srcをラジオボタンのvalueに挿入しているのですけれど、どうしても画像srcが取得できません。

【試しているコード】

下記コード8行目var src = $(this).parent().find('.slide img').attr('src');を試してみました。

しかし、表示中の画像srcでなく、スライダー1枚目の画像srcが取得されてしまいます。

現状の動作、図、コードを貼っておきますので、ご確認頂ければ幸いです。

■現状の動作↓
https://jsfiddle.net/3pe0j501/27/

■現状の図↓
イメージ説明

■現状のコード↓

<!-- 【スライダー】 -->
<p class="func">▼画像スライダー</p>
<section id="AB">
<section id="A">
  <div class="slider">
    <div class="slideSet">

    <div class="slide">neko1<img src="http://example.com/wp-content/themes/theme-child/images/neko1.jpg" class="img"></div>

    <div class="slide">neko2<img src="http://example.com/wp-content/themes/theme-child/images/neko2.jpg" class="img"></div>

    </div>
  </div>
  <div class="btn">ボタン</div>
</section>

<section id="B">
  <div class="slider">
    <div class="slideSet">

    <div class="slide">inu1<img src="http://example.com/wp-content/themes/theme-child/images/inu1.jpg" class="img"></div>

    <div class="slide">inu2<img src="http://example.com/wp-content/themes/theme-child/images/inu2.jpg" class="img"></div>

    <div class="slide">inu3<img src="http://example.com/wp-content/themes/theme-child/images/inu3.jpg" class="img"></div>    

    </div>
  </div>
  <div class="btn">ボタン</div>
</section>
</section>

<!-- 【ラジオvalue連動】 -->  
<p class="ques">▼valueを表示中の画像ファイル名にしたい</p>
<input class='abc' type=radio value='ボタンクリック前' checked><span>value=</span><span id="output"></span>
////ボタンクリックしたときの機能
(function($){
$(document).ready(function(){

    $(".btn").click(function(){

        // 表示中の画像srcを取得したいのに、最初の画像srcしか取得できない 
        var src = $(this).parent().find('.slide img').attr('src');

        // 取得したsrcをvalueに挿入
        var splittedUrl = src.split('/')
        document.getElementsByClassName("abc")[0].value = splittedUrl[splittedUrl.length - 1].split('.')[0];

    })

});
})(jQuery);


////検証のためのvalue表示
var target = document.getElementsByClassName("abc")[0];
var output = document.getElementById("output");
setInterval(function(){
output.innerHTML = target.value;
},10);


////スライダー機能
(function(){

// 初期設定
$('.slideSet').each(function(index,element){
    var $this = $(element);
  var $slides = $this.find('.slide');
  $this.data('slideWidth' , $slides.eq(0).outerWidth());
  $this.data('slideNum' , $slides.length);
  $this.data('slideSetWidth' , 
                          $slides.eq(0).outerWidth() * $this.data('slideNum') );
  $this.css('width', $this.data('slideSetWidth'));

  $this.data('slideCurrent', 0);

});

    // アニメーションを実行する独自関数
    var sliding = function($this){

        var slideCurrent = $this.data('slideCurrent');    // クリックした要素の現在地
        var slideNum = $this.data('slideNum');
        var slideWidth = $this.data('slideWidth');

        // slideCurrentが0以下だったら
        if( slideCurrent < 0 ){
            slideCurrent = slideNum - 1;

        // slideCurrentがslideNumを超えたら
        }else if( slideCurrent > slideNum - 1 ){    // slideCUrrent >= slideNumでも可
            slideCurrent = 0;

        }

        $this.stop().animate({
            left: slideCurrent * -slideWidth
        });

          $this.data('slideCurrent' , slideCurrent); // 移動したので再代入
    }

    // 画像が押されたとき
    $('.slideSet').click(function(){
        var $this = $(this);

          var num = $this.data('slideCurrent') + 1;
         // $('body').append('<p>'+num+'</p>');
        $this.data('slideCurrent',num);
        sliding($this);
    });

}());
/*スライダーのCSS*/
.slide {
  width: 100px;
  height: 50px;
  border: 1px solid #888;
}
img {
  width: 100px;
  height: 50px;
}
.slideSet > div {
            width: 100px;
            height: 50px;
            box-sizing: border-box;
        }

        .slide {
            float: left;
        }

        .slideSet {
            position: absolute;
        }

        .slider {
            width: 100px;
            height: 50px;
            overflow: hidden;
            position: relative;
        }

/*装飾のCSS*/
#AB {
  display: flex;
}
#A, #B {
  margin: 0 20px 0 0px;  
}
.btn {
  background: #0a7cff;
  width: 100px;
  border-radius: 10px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  margin: 10px 0 0px 0;
  cursor: pointer;
}
.ques {
  background: #FF6565;
  padding: 5px;  
}
.func {
  background: #ddd;
  padding: 5px;
}       

以上です。
長くなってしまってスミマセン。
どうぞよろしくお願いいたします。m(_ _)m

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/03/02 16:26

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

checkベストアンサー

0

複製ボタンを押した時、表示されている要素(neko1ならneko1の要素)が複製されているのではなく、
.sliderを丸ごと入れて、CSS(left)で表示を変えていたのですね。

本来ならば、複製ボタンを押した時に、その要素のみを入れたいところですが、sliderの挙動を変えずにやるのなら、「slideCurrent」を取得する必要があります。

0,1で取得され、セレクタはnth-childなので、+1しています。

    //src変更機能
      var src = $('.linkimg .slide:nth-child('+parseInt($('.slideSet').data('slideCurrent')+1)+') img').attr('src');

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/01 13:44 編集

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

    ところで、実はスライダーは2枚だけでなく、3枚だったり、もっと多かったりもします、、泣

    (最初の質問では2枚しか載せておらず失礼しました。質問文を修正いたしました。)

    この不確定な枚数についても同じように機能させることは可能でしょうか…?

    ご教示いただいた「+1」ですと、たとえばinu3を複製したときに、inu3でなくinu1のsrcが取得されてしまう様子なので、これまた困ってしまいました。。

    思いつくこと、ヒントなどなんでもご教示いただけましたら幸いです。

    キャンセル

  • 2018/03/02 21:59

    こんばんは。Lhankor_Mhyさんのフォローもあり、お蔭さまで解決いたしました。ご回答どうもありがとうございました!!

    キャンセル

  • 2018/03/02 22:43

    いえいえ、解決できて何よりです。2つある場合だと不十分でしたね、失礼しました。

    キャンセル

0

ざっとみた感じ、$(".btn").click(function(){...})$('.slideSet').each(function(index,element){...})の中に書いたほうがいいのではないかな、と思いました。
複製ボタンを含めて要素をラップして、それに対して.each()メソッドを使い、クロージャで処理すれば、ややこしいことが減りそうな……?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/02 21:56

    解決したようで何よりです。
    ただ、これはkszk311さんのご回答なので、BAはそちらにつけていただけませんか。私はフォローしただけですので(あちらのコメントでやればよかったですね)。

    キャンセル

  • 2018/03/02 21:57

    かしこまりました。そのように致します。素敵な気配りですね。

    キャンセル

  • 2018/03/02 22:30

    本日連絡出来ずにすみませんでした。やりとり拝見させて頂きました。Lhankor_Mhyさん、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる