表示中の画像srcを取得したい（javascript）

Question

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

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

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

しかし、表示中の画像srcでなく、スライダー１枚目の画像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

Answer 1

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

Comments

[退会済みユーザー]

それに対して.each()メソッドを使い、クロージャで処理する、と、おっしゃいますと…？？もう一歩お願いいたします。m(_ _)m

[Lhankor_Mhy]

いや、kszk311さんの回答の方向でいいと思います。
上手くいかないのは、$('.slideSet')が別のスライダーを参照しているせいです。そこを修正したところ、正常に動作確認できました。

[退会済みユーザー]

元の質問（画像を複製する機能があるもの）に対する、kszk311さんのご回答を追記したものが下記ですけれど、、
https://jsfiddle.net/3pe0j501/32/

nekoはバッチリですけれど、これだとやっぱりinu側の複製がおかしくないですか？(@_@)

[Lhankor_Mhy]

kszk311さんのご回答
var src = $('.linkimg .slide:nth-child('+parseInt($('.slideSet').data('slideCurrent')+1)+') img').attr('src');
がコードに見当たりませんでした。
再度確認してください。

[退会済みユーザー]

大変失礼いたしました！リンク先修正しておきました。

[Lhankor_Mhy]

繰り返しになりますが、上手くいかないのは、$('.slideSet')が別のスライダーを参照しているせいです。修正してください。

[退会済みユーザー]

すみません、別のスライダー、と仰いますと…？
まったくの素人でして、直す場所に検討がつかず、苦戦しております。
またお手すきの折にご教示いただけましたら幸いです。。

[Lhankor_Mhy]

ご提示のサンプルでは、$('.slideSet')は3つ存在します。
ここまではいいですか？

[退会済みユーザー]

はい。
//src変更機能
// 初期設定
// 画像が押されたとき
の位置の３つですね。

[退会済みユーザー]

わ、うれしいです。魚をやるのではなく、釣り方を教えようとして下さっているのですね♪

[Lhankor_Mhy]

その場合、
$('.slideSet').data('slideCurrent')
は、3つあるうちの一番初めの要素の値を返します。この場合は、nekoの方です。
なので、nekoは上手くいきますが、inuは現在のnekoと同じ番目の画像が表示されるはずです。

ですから、$('.slideSet') を .linkimg 内にあるスライダーに限定する必要があります。
この書き方は分かりますか？

[退会済みユーザー]

なるほどなるほど。ところで、

>$('.slideSet') を .linkimg 内にあるスライダーに限定する

とありますけれど、下記の↓

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

こちらの部分↓

$('.linkimg .slide

が、まさに「.linkimg 内にあるスライダーに限定する」という意味ではないのでしょうか？？

と、いう風に考えてしまいます。。

[Lhankor_Mhy]

はい、そのとおりです。
$('.linkimg .slide:nth-child('+parseInt($('.slideSet').data('slideCurrent')+1)+') img')
このコードは、分解すると、
$(
'.linkimg .slide:nth-child('
+parseInt( $('.slideSet').data('slideCurrent') +1 )+
') img'
)
ということです。
よく見ると、二つ目の $ オブジェクトはメソッドチェーンが届いているわけではないので、改めて限定する必要があります。

[退会済みユーザー]

つまり、

二つ目の $ オブジェクト
↓
$('.slideSet')

を「.linkimg 内にあるスライダーに限定する」わけですね。

すると、下記に書き換えればできそう！

$('.linkimg .slide .slideSet')

…な予感がしたのですけれど、ダメですね。笑

他にもいくつか書き換えてみたのですが、どうも限定するために必要な部分を抜き出すことができません。

[Lhankor_Mhy]

おしいですよ。

jQueryもCSSも同じなのです。
␣（半角スペース）は「子孫セレクタ」と呼ばれるものです。

.linkimg␣.slide␣.slideSet
は、.linkimg の子孫の .slide の子孫の .slideSet、という意味です。
実際には、.slide の子孫に .slideSet はないですよね。

[退会済みユーザー]

あ、ほんとですね。たしかに、.slideSet は .slide の子孫にはありませんでした。

えー？？でもそうすると、、、

$('.linkimg .slide img')

か、または全部子供たちを指定して

$('.linkimg .slider .slideSet .slide img')

などをすれば、で、でき、できるハズじゃないですか！！！笑

[Lhankor_Mhy]

親子関係を全部書く必要はないです。
祖父␣父␣子
ではなくて、
祖父␣子
の2つだけで十分です。

$('.slideSet').data('slideCurrent')
これは、.slideSet にキャッシュした slideCurrent のデータを読み込め、という意味です。

なので、.slideSet の子孫までさかのぼってしまうと、データが取れなくなります。.slideSet で止めてください。

[退会済みユーザー]

.slideSet 以前まで、かつ、２つで十分

そうしますと、

$('.linkimg .slider')か
$('.linkimg .slideSet')のいずれか、

ですよね？

…泣きそうです。笑

[Lhankor_Mhy]

そうですね。
.slideSetのデータを取ろうとしているのですから、後者ですね。

[退会済みユーザー]

んっと、まってください？

後者によって「.linkimg 内にあるスライダーに限定する」ができたということでしょうか？

やってみたのですけれど、、、
https://jsfiddle.net/3pe0j501/60/

…泣きそうなんですｗ教えていただけませんでしょうか？(>_<)

[Lhankor_Mhy]

あー、スライダーだけではなくて、その下にも反映したいのですか。
それは失礼しました。問題を読み間違えていました。

var cloneObject = $(this).parent().find(".slider").clone( true );
と、true を追加してください。

[退会済みユーザー]

泣きました。できました。うれし半泣きです。本当にありがとうございます。自分なりに苦労したので喜びもひとしおです。うれしいよおおお！！！

何度も、何度も何度もお付き合い頂き、ほんっとうに！どうもありがとうございます。

[Lhankor_Mhy]

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

[退会済みユーザー]

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

[kszk311]

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

Answer 2

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

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

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

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

Comments

[退会済みユーザー]

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

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

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

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

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

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

[退会済みユーザー]

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

[kszk311]

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