2016-03-30 14 views
-1

JavaScriptを使用して画像のサイズを変更しようとしています。この例は作業中のjsfiddleに基づいていますが、ページが機能していないようです。私は間違った場所でスクリプトを推測しますが、私は正しいものを見つけることができませんでした。それを正しく置く方法?画像を更新するためにjavascriptを実行するにはどうすればいいですか?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
     <script type='text/javascript'> 
      function loadImage() { 
       $(this).attr('height', $(this).parent().parent().parent().attr('imgheight')); 
      } 
     </script> 
    </head> 
    <body> 
     <div imgheight="300px" class="images"> 
      <div> 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " onload="loadImage()"/></a> 
      </div> 
      <div> 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " onload="loadImage()"/></a> 
      </div> 
     </div> 
    </body> 
</html> 

EDIT

はまだ動作しません:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type='text/javascript'> 

    $(function() { 
     $('.images div a img').on('load', function() { 
      $(this).attr('height', $(this).closest('.images').data('imgheight')); 
     }); 
    }); 

</script> 
    </head> 
    <body> 
     <div imgheight="300px" class="images"> 
      <div> 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> 
      </div> 
      <div> 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " /></a> 
      </div> 
     </div> 
    </body> 
</html> 

SOLUTION正しくjqueryのを含めるために必要な

。一度私が持っていた、それは正常に動作します。

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     $('.images div a img').on('load', function() { 
      alert($(this).closest('.images').attr('imgheight')); 
      $(this).attr('height', $(this).closest('.images').attr('imgheight')); 
     }); 
    }); 
    </script> 
<body> 
    <body> 
     <div imgheight="300px" class="images"> 
      <div> 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> 
      </div> 
      <div> 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> 
      </div> 
     </div> 
    </body> 

</body> 
</html> 
+0

がloadImage()が呼び出さなっているでしょうか?また、それが働いている場所にフィドルへのリンクを貼り付けることができます –

答えて

1

変更$(this).closest('.images').attr('imgheight')から$(this).closest('.images').data('imgheight')を使用すると、属性の値を取得したい場合は、ちょうど$.attr('get value attrb')

$(function() { 
 
     $('.images img').on('load', function() { 
 
      console.log($(this).closest('.images').attr('imgheight')) 
 
      $(this).attr('height', $(this).closest('.images').attr('imgheight')); 
 
     }); 
 
    });
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
 
     
 
    <body> 
 
     <div imgheight="300px" class="images"> 
 
      <div> 
 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> 
 
      </div> 
 
      <div> 
 
       <a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> 
 
      </div> 
 
     </div> 
 
    </body>

+0

jqueryを正しく組み込んだら作業を開始しました。 –

3

あなたがon*属性を使用して、イベントハンドラをアタッチしているため、問題がある、関数内this参照は、イベントが、windowを上げた要素ではありません。関数への参照をパラメータとして渡す必要があります。

また、HTMLにいくつか問題があることにご注意ください。まず、parent()コールの代わりにclosest('.images')を使用し、imgheight属性が無効です。要素を含むカスタムメタデータを格納するには、data-*属性を使用する必要があります。最後にa要素にはhrefまたはname属性が必要です。言ったことすべてで、これを試してみてください。

<div data-imgheight="300px" class="images"> 
    <div> 
     <a href="#"> 
      <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" onload="loadImage(this)" /> 
     </a> 
    </div> 
    <div> 
     <a href="#"> 
      <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" onload="loadImage(this)" /> 
     </a> 
    </div> 
</div> 
function loadImage(el) { 
    $(el).attr('height', $(el).closest('.images').data('imgheight')); 
} 

また、より良いアプローチは、あなたのイベントハンドラをアタッチする控えめなJavascriptを使用することです。すでにjQueryを使用しているので、ここに例があります。最後に

<script type='text/javascript'> 
    $(function() { 
     $('.images img').on('load', function() { 
      $(this).attr('height', $(this).closest('.images').data('imgheight')); 
     }); 
    }); 
</script> 
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" /> 

data-imgheight属性が最後にロードimg要素の高さに設定されることに注意してください。これがあなたがやろうとしているものなら、偉大ですが、使用するにはちょっと奇妙なパターンです。

+0

'parent()。parent()。parent()'に代わるものはありませんか? – Rayon

+0

@RayonDabreうん、ありがとう。いくつかの追加提案で編集中でした。 –

+0

喜んでください。私は 'attr'の代わりに' css'を使うでしょう。より良い習慣についてはわかりません。 – Rayon

関連する問題