javascript - データ テキスト属性からのデータの表示

Question

立方体の下にテキストを表示しようとしています....フィドルで一人で作業するとコードは正常に機能します....しかし、プロジェクトに配置すると機能しません....方法を教えてくださいdata-text="Cube1"値を表示するには.....

作業コードhttp://jsfiddle.net/PKwDp/4/

コードが機能しないhttp://jsfiddle.net/rajkumart08/EDKkg/1/

  $('document').ready(function () {
            window.setTimeout(function () {
                $('.cubeCell').each(function () {
                    var htmlText = $(this).attr('data-text');
                    $(this).append('<div class="cubeTextStyle">'+htmlText+'</div>');
                });
            }, 600);

        });


<div  data-text="Cube1" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">testing</div>

Answer 1

あなたの（動作していない）例の問題は、属性を持つ要素にクラスdata-textがないことです。cubeCell

これは、jsFiddle にある HTML です。

<div  data-text="Cube1" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png">testing</div>

編集：

jsFiddle を更新した後、テキストが正しく追加されるようになりました。ただし、立方体自体の後ろに隠れているため、見ることはできません。しかし、CSS は実際の例とはかなり異なるため、これは CSS の問題です。

編集2：

の CSS がありませんdiv.cubeTextStyle。あなたの作業例は次のとおりです。

div.cubeTextStyle {
  position: relative;
  top: 105px;
  background: none !important;
  color: #333 !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

Answer 2

次のようなデータ属性を使用していると思います。

$(this).data('text').val()