Как правильно использовать $ (this)

Question

Я создаю коды jquery, которые заставляют каждое изображение исчезать после щелчка изображения. Я использую одни и те же изображения, однако, когда я нажимаю на них, он не скрывает тот, который был нажат, вместо этого он скрывает изображения снизу вверх.

Вот мой код jQuery.

$(document).ready(function(){ 
    $('img').click(function(){ 
     $(this).hide(); 
    }); 

}); 

Любая идея?

Answer 1

Это на самом деле действительно скрывается элемент щелкнули.

Однако, похоже, он скрывается снизу вверх, потому что когда вы нажимаете верхний элемент, этот элемент скрыт, а нижние элементы сдвигаются вверх на свое место.

Чтобы доказать это вашей собственной личности, попробуйте добавить title атрибуты к изображениям

$(document).ready(function() { 
 
     $('img').click(function() { 
 
     $(this).hide(); 
 
     }); 
 

 
    });

body { 
 
    background-color: #e74c3c; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 300 
 
} 
 
#wrapper { 
 
    width: 71%; 
 
    margin: 0 auto; 
 
} 
 
img { 
 
    border: 6px solid #f1c40f; 
 
    margin: 20px 22px 0px 0px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section> 
 
    <img src="http://goo.gl/CIHVmL" title="image 1" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 2" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 3" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 4" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 5" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 6" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 7" /> 
 
    <img src="http://goo.gl/CIHVmL" title="image 8" /> 
 
</section>

Answer 2

$(document).ready(function(){ 
    $('img').click(function(){ 
     $(this).fadeOut(); 
    }); 
}); 

Попробуйте это для вас, чтобы знать, что ваш код работает :)

Answer 3

Ouwh, ваш код работает. Вы этого не видели, потому что все изображения были одинаковыми. Измените изображение, и вы увидите, что делает этот код. Проверьте этот код.

$(document).ready(function() { 
 
     $('img').click(function() { 
 
     $(this).hide(); 
 
     }); 
 

 
    });

body { 
 
    background-color: #e74c3c; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 300 
 
} 
 
#wrapper { 
 
    width: 71%; 
 
    margin: 0 auto; 
 
} 
 
img { 
 
    border: 6px solid #f1c40f; 
 
    margin: 20px 22px 0px 0px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <img src="http://goo.gl/CIHVmL" style="border:6px solid green" /> 
 
    <img src="http://goo.gl/CIHVmL" style="border:6px solid red" /> 
 
    <img src="http://goo.gl/CIHVmL" style="border:6px solid blue" /> 
 
    <img src="http://goo.gl/CIHVmL" /> 
 
    <img src="http://goo.gl/CIHVmL" /> 
 
    <img src="http://goo.gl/CIHVmL" /> 
 
    <img src="http://goo.gl/CIHVmL" /> 
 
    <img src="http://goo.gl/CIHVmL" /> 
 
</section>