0

次のhtmlコードがあります。

<div align="center">
  <img src="blue.png"/>     
  <img src="cyan.png"/>
  <img src="green.png"/>
  <img src="purple.png"/>
  <img src="red.png"/>
  <img src="yellow.png"/>
<div\>

どちらがクリックされたかに応じて、javascript変数を変更する必要があります。

赤がクリックされた場合は「赤」、青がクリックされた場合は「青」などに等しくする必要がありvar colorます...これを行う簡単な方法はありますか?

4

5 に答える 5

2

各画像の src が拡張子だけの色になると仮定すると、これを行うことができます。

var images = document.getElementsByTagName('img');

for(var i = 0; i < images.length; i++) {
    images[i].onclick = onImageClick;
}

function onImageClick(e) {
    var image = e.event.target || window.event.target;

    var color = image.src.split('.')[0];

    alert(color);
}

これはあまり動的ではないため、このようなデータ属性を使用する必要があります。

<img src="blue.png" data-color="blue" />

とonImageClick()、こんな感じになります。

function onImageClick(e) {
    var image = e.event.target || window.event.target;

    var color = image.getAttribute('data-color');

    alert(color);
}
于 2013-01-22T04:41:11.470 に答える
1

イメージタグで色属性を保持できます

<img src='my_image' my_color='blue' class='' onclick='myFunc(this)'>

次に、onclick function() をアタッチすることで、js でアクセスできます。

function myFunc(obj)
{
    var color = obj.getAttribute('my_color');
}

それが役立つことを願っています。

于 2013-01-22T04:36:57.193 に答える
1

jQueryで

<div align="center">
  <img src="blue.png"   data-color="blue"   />     
  <img src="cyan.png"   data-color="cyan"   />
  <img src="green.png"  data-color="green"  />
  <img src="purple.png" data-color="purple" />
  <img src="red.png"    data-color="red"    />
  <img src="yellow.png" data-color="yellow" />
</div>

<script>
    $('.color').click(function () {
        var current_color = $(this).data('color');
    });
</script>
于 2013-01-22T04:43:19.437 に答える
0 
$('img').click(function(){
   var color = $(this).attr('src').split('.')[0];
   alert(color);
});

上記のコードは、jQuery で img の src を使用して var color を取得することです

于 2013-01-22T05:23:07.503 に答える
-1

jQueryを学びましたか？
主な html ファイルの Head タグの間に jQuery ライブラリをリンクする必要があります http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

jQuery を使用すると、クラス セレクターを選択して、必要なアクションをそれに適用できます。

2 つのアクションを組み合わせようとしています。1) 要素をつかみます 2) その要素にクリック アクションを適用します。

jQuery はこれを簡単にします。

jQuery のフォーマットは次のとおりです。 $('element').effect();

あなたの質問に答えるには： $('.over').click();

注: クラスの名前を変更して、色をその .png 画像に関連付けることをお勧めします。これにより、後で参照していることがわかります。いくつかの .png 画像に対してクラス名「over」が繰り返されています。したがって、jQuery はクラス「over」を持つすべての要素を選択し、そのアクションをそれに適用します。

また、そのクリック イベントに任意の関数を適用できるようになりました。

たとえば、次のようになります。

    var color = $('.blue').click(function(){
        if(color === blue){
            return blue;
    }
于 2013-01-22T04:42:49.363 に答える