jqueryプラグインのbxsliderを実装した時にaria-hidden属性が取得できません。

下記の様にattrメソッドを使って取得する方法を考えましたが取得できず、undefinedとなります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <div class="bxslider">
        <div class="bx1" style="background-image:url('./a.jpg');"aria-hidden="true">
        </div>
        <div class="class2" style="background-image:url('./b.jpg');">
        </div>
      </div>
    </div>

    <script>
    var a = $('.bx1').attr('aria');
    console.log(a);
    </script>
  </body>
</html>

これは何が原因なのでしょうか。

(追記)
紛らわしくてすみません。
上にインラインでaria-hidden="true"を書きましたがこれは「インラインで描いたら取得できるの？」と思って書いただけです。
目的はbxsliderで勝手についてくるaria-hidden属性値をこちらで意図的に操作したいということです。
インラインで書いたaria-hidden="true"を消去するのを忘れてました。すみませんでした。

(追記)

!DOCTYPE html>
<html>

<head>
  <title>{val c/cmsname}</title>
  <meta charset="utf-8">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./css/a.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css">
</head>

<body>
  <div>
    <div class="bxslider">
      <div class="bx1" style="background-image:url('.a.jpg');">
      </div>
      <div class="class2" style="background-image:url('.b.jpg');">
      </div>
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('.bxslider').bxSlider();
    });
  </script>
  <script>
  var a = $('.bx1').prop('aria-hidden')
  var b = $('.class2').prop('aria-hidden');
  console.log(a);
  console.log(b);
  </script>
</body>

</html>

行動規範の内容に同意します

回答2件

ベストアンサー

名前が正しくても、aria-hiddenがJavaScriptによって動的に変わるのであればattrじゃなくpropを使わないと正しく取れない可能性があります。

追記

無意味に呼び出しても、boxsliderが動いていなければ取得できません。boxsliderの各動作の後取得して下さい。具体的には、
https://bxslider.com/options/
に書かれているCallbackを調べ、そのコールバックの中でチェックして下さい。

追記２

確認しました。次の流れで動作しています。

<div class="bx1" style="background-image:url('.a.jpg');">がhtml上に出現。このじてんではaria-hiddenは存在しない
var a = $('.bx1').prop('aria-hidden')が実行される。前述の通り、aria-hiddenは存在しないのでundefined
ready内で$('.bxslider').bxSlider();が呼ばれる。ここで恐らくaria-hiddenが追加されるので、propで取れるようになる`

投稿2018/02/03 10:44

編集2018/02/03 12:35

dala00

総合スコア441

wkenginer

2018/02/03 10:50

そうだったんですか！ありがとうございます！やってみます。

wkenginer

2018/02/03 10:54

「var a = $('.class1').prop('aria-hidden');」にしたのですが、undefinedのままでした。。

wkenginer

2018/02/03 10:58

「var a = $('.bx1').attr('aria-hidden');」にする必要がありました。ただこの場合でもできませんでした。

dala00

2018/02/03 11:04

上記どっちも間違いで正しくは下記では？「var a = $('.bx1').prop('aria-hidden');」

wkenginer

2018/02/03 11:11

すみません、var a = $('.bx1').prop('aria-hidden')にしましたが同じでした。質問と関係ない基本的なところで煩わせてしまってすみません。。

dala00

2018/02/03 11:14

追記しました。

wkenginer

2018/02/03 11:32

callbackとはbxsliderのオプションでしょうか？「var a = $('.bx1').prop('aria-hidden')」は<script>〜</script>の最後(bxsliderを呼ぶ記述よりも下)に書いたため、bxsliderによるスライド移動の開始後に「var a = $('.bx1').prop('aria-hidden')」と「console.log(a);」が動くと思うので、タイミング的には大丈夫かと思ったのですが。

dala00

2018/02/03 11:48 編集

詳しくは分かりませんが、boxslider自体の内部動作がreadyの時点で呼ばれているのであれば、scriptタグ内の最後にかいてもだめですね。readyが最後に呼ばれますから、scriptタグの最後の位置ではまだboxsliderは初期化されていません。 ↑すみません、間違いかも。何にしろ、提示していただいたhtmlと違うのであれば、実際のソースを見てないのでわからないですね。

wkenginer

2018/02/03 12:03

そういうことですね。ありがとうございます。 jsが読まれるタイミングなどきちんと理解していませんでした。ソースコード全文を追記したのですがご確認頂けますでしょうか。

dala00

2018/02/03 12:35

追記しました。

wkenginer

2018/02/03 22:30

ありがとうございます。 bxsliderを呼んでいる記述の下に <script> $(document).ready(function() { var a = $('.bx1').prop('aria-hidden') var b = $('.class2').prop('aria-hidden'); console.log(a); console.log(b); }); </script> を書きましたが変わらないのですがどうすればいいでしょうか。 readyよりも後に読まれるとされている $(window).load(function(){ var a = $('.bx1').prop('aria-hidden') var b = $('.class2').prop('aria-hidden'); console.log(a); console.log(b); }); でもダメでした。。

dala00

2018/02/03 23:28

最初にかいたように、調べる場所はreadyじゃなくcallback内だと思います。

wkenginer

2018/02/04 00:06

今回の場合はbxsliderが読み込まれて動いた後にpropが動くというcallbackが必要だと思うのですがどのように書いたらいいのでしょうか。 .bxslider,クラスに対してbxslider()を実行するという処理なので関数に関数をわたすやり方がよくわかりませんでした。

defghi1977

2018/02/04 00:54

> 名前が正しくても、aria-hiddenがJavaScriptによって動的に変わるのであればattrじゃなくpropを使わないと正しく取れない可能性があります。ここが間違っている気がします. $('.bx1').prop('aria-hidden') が返す値は $('.bx1')[0]['aria-hidden'] （DOMにそのようなプロパティ定義は存在しないので常にundefined）で, 一方 $('.bx1').attr('aria-hidden') が返す値は $('.bx1')[0].getAttribute('aria-hidden') なので, aria-hidden属性が設定されたあとにattrメソッドを実行するのが正解かと

dala00

2018/02/04 03:32

https://webman-japan.com/webcreate/bxslider-callback/ とか参考にどうぞ

wkenginer

2018/02/04 12:10

ありがとうございます。もう少し勉強してから再度やってみたいと思います。この度は貴重なアドバイスをくださり誠にありがとうございました。

行動規範の内容に同意します

html
1<div class="bx1" style="background-image:url('./a.jpg');"aria-hidden="true">

↓

html
1<div class="bx1" style="background-image:url('./a.jpg');" aria-hidden="true">

js
1var a = $('.bx1').attr('aria');

↓

js
1var a = $('.bx1').attr('aria-hidden');

こちらで動作を確認したコード
上記の方法で動かないと言うのは、記述を間違っているからでしょう。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5	</head>
6	<body>
7		<div>
8			<div class="bxslider">
9				<div class="bx1" style="background-image:url('./a.jpg');"aria-hidden="true">
10				</div>
11				<div class="class2" style="background-image:url('./b.jpg');">
12				</div>
13			</div>
14		</div>
15		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
16		<script>
17			var a = $('.bx1').attr('aria-hidden');
18			alert(a);
19		</script>
20	</body>
21</html>