jQueryを使用して、クリックした画像を検出する方法を見つけようとしています。私が今持っているコードを使用して画像をクリックすると、出力としてIMGが表示されますが、私が探していた出力ではありません。私はクラスを持つ画像をクリックすると.I、それは私を与える必要があります.I出力として。現在、IMGを出力として取得しています。
HTML：
<div class="row">
<div class="col-xs-4 col-md-4 text-center">
<div class="img-wrapper i">
<img src="media/i-formatie.jpg" class="img-responsive">
</div>
I-formatie
</div>
<div class="col-xs-4 col-md-4 text-center">
<div class="img-wrapper u">
<img src="media/u-formatie.jpg" class="img-responsive">
</div>
U-formatie
</div>
<div class="col-xs-4 col-md-4 text-center">
<div class="img-wrapper o">
<img src="media/o-formatie.jpg" class="img-responsive">
</div>
O-formatie
</div>
</div>
jQuery：
$(".i,.u,.o").click(function(event){
$("#S-formatie").html("Triggered by a " + event.target.nodeName + " element.");
});
event.targetは、実際にクリックしたものです。
event.currentTargetは、イベントリスナーがアタッチされているものです。
$(".i,.u,.o").click(function(event) {
$("#S-formatie").html("Triggered by a " + event.currentTarget.classList[1] + " element.");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="S-formatie"></div>
<div class="row">
<div class="col-xs-4 col-md-4 text-center">
<div class="img-wrapper i">
<img src="http://via.placeholder.com/350x150" class="img-responsive">
</div>
I-formatie
</div>
<div class="col-xs-4 col-md-4 text-center">
<div class="img-wrapper u">
<img src="http://via.placeholder.com/350x150" class="img-responsive">
</div>
U-formatie
</div>
<div class="col-xs-4 col-md-4 text-center">
<div class="img-wrapper o">
<img src="http://via.placeholder.com/350x150" class="img-responsive">
</div>
O-formatie
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加