jqueryのために<image id>をどうやって引き渡すことができますか？

Question

ユーザーが自分のサイトの画像をクリックしたとき。今jQueryのクリックされた画像のIDを取得し、別の画像に画像を変更する必要があります。

ここに私のjQueryの：

function changeCircle() { 
    // div "holen" var object = 
    // var object = document.getElementById("Kuchen"); 
    // var id = obj; 
    // object.src="img/icon-check.png"; 
    // $("#GarantienFrage1").attr('src', "img/icon-check.png"); 
    $("id").attr('src', "img/icon-check.png"); 
    // $(this.id).attr('src', "img/icon-check.png"); 
} 

ここに私のHTMLです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 

<div id="Kuchen"> 
    <img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle();" /> 
</div> 

私が取得できますかクリックすると画像が変わりますか？

Answer 1

は、おそらくあなたがあなたのケースでthis したがって<img>タグ されていませんが誰であるかを知る必要があり、私はあなたの関数

function changeCircle(target) { 
 
    console.log('this is: ' + this); 
 
    console.log('BEFORE: ' + $(target).attr('src')); 
 
    $(target).attr('src', 'img/icon-check.png'); 
 
    console.log('AFTER: ' + $(target).attr('src')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="Kuchen"> 
 
    <img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle(this);" /> 
 
</div>

Answer 2

あなたのセレクタにtargetのparamを入れていますあなたのDOMの最初の<id>要素を対象とした画像をターゲットにしていません。これに

$("id").attr('src', "img/icon-check.png"); 

：

$("img.maus_pointer").attr("src", "img/icon-check.png"); 

これはクラスだ<img>要素がmaus_pointerであり、そのsrc属性の値を変更することを選択し、この

変更。

また、絶対パスを使用していないため、新しい画像をターゲットにしているため、新しい画像ソースがページの場所から比較的アクセス可能であることを確認してください。