Итак, у меня невероятно простая настройка страницы, при которой вы нажимаете кнопку, и появляется изображение, а при нажатии на изображение оно исчезает. Однако всякий раз, когда я добавляю второй экземпляр кнопки, это также влияет на предыдущее изображение. Обычно я хорошо справляюсь с этой проблемой, но я в полном замешательстве.
Я бы подумал, что щелкнув по каждому элементу в классе, можно будет выбрать только выбранный элемент, поскольку я помню, что это происходило в прошлом.
$('.button').click(function() {
$(this).siblings('.image').css({
width: '100px',
height: '100px'
})
$(this).fadeOut();
})
$('.image').click(function() {
let x = $(this).index()
$(this).css({
width: '0px',
height: '0px'
})
$(this).siblings('.button').fadeIn()
})
.container {
width: 200px;
height: 200px;
position: absolute;
outline: 1px solid blue;
}
#container1 {
top: 300px;
left: 300px;
}
.button {
font-size: 20px;
color: black;
}
.button:hover {
cursor: pointer;
}
.image {
width: 0px;
height: 0px;
position: absolute;
top: 0px;
background-size: cover;
transition-duration: 1.0s;
}
#container2 {
top: 100px;
left: 500px;
}
#image1 {
background-image: url('../images/slide1.jpg');
}
#image2 {
background-image: url('../images/1.jpg');
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</head>
<body>
<div class="container" id="container1">
<div class="button" id="button1">+
</div>
<div class="image" id="image1">
<div>
</div>
<div class="container" id="container2">
<div class="button" id="button2">+
</div>
<div class="image" id="image2">
<div>
</div>
<script type="text/javascript" src="js/custom_behaviors.js"></script>
</body>
</html>