У меня есть 3 div в контейнере div ("screenshots-container"
), которые показывают imgs. Я нажимаю img в div ("individual-screenshot"
), он оживляет img
.
До сих пор я работал:
Если я нажму на img
, он обновит его имя класса контейнера от "individual-screenshot"
до "individual-screenshot current-screenshot"
. Затем он оживляет размер и положение img.
Если я нажму на другой img
, в другом div
предыдущее имя класса div
вернется к "individual-screenshot"
, а новое имя класса div
обновится до "individual-screenshot current-screenshot"
и недавно щелкнутого img
оживляет размер и позиция соответственно - первоначально нажатый div
img
не возвращается к исходному положению и размеру.
Проблемы с:
img
в div
который был нажат в первую очередь, не оживляет его исходное положение.
HTML
<div class="screenshots-container">
<div class="individual-screenshot current-screenshot">
<a href="#"><img src="assets/test-icon.png" style="display: inline-block; height: 200px; width: 200px; margin-left: 280px; position: relative;"></a>
</div>
<div class="individual-screenshot">
<a href="#"><img src="assets/party.png"></a>
</div>
<div class="individual-screenshot">
<a href="#"><img src="assets/test-icon.png"></a>
</div>
</div>
</div>
CoffeeScript (с jQuery):
showScreenShot: (e) ->
e.preventDefault()
$imgClicked = $(e.currentTarget)
console.log "$imgClicked:", $imgClicked
$div = $($imgClicked[0].parentElement.parentNode) # img parent div (individual-screenshot)
$screenshotsContainer = $(".screenshots-container")
$screenshotsList = $screenshotsContainer[0].childNodes
$otherScreenshots = $($screenshotsContainer[0].childNodes).not($div)
console.log "$otherScreenshots: ", $otherScreenshots
# Adds "current-screenshot" as class for all in array
$.each $screenshotsList, (index, value) ->
# changes class name of div
$value = $(value).removeClass("current-screenshot") # remove current-screenshot class name on other divs
if $div.hasClass("current-screenshot")
console.log "$div: ", $div
$screenshot = $($div[0].childNodes[0].children)
$screenshot.animate
"height": "200px"
"width": "200px"
"marginLeft": "280px"
.css
"position": "relative"
else
# not sure how to proceed. How can I get a reference to the originally clicked div, so that I can reverse its animation back to where it was?
До сих пор хакерский хакерский подход:
Анимация div (paddingLeft и позиция css) вместо img, который он содержит. Все еще далек от совершенства, особенно потому, что я не могу четко ссылаться на ранее выбранный элемент.
showScreenShot: (e) ->
e.preventDefault()
$imgClicked = $(e.currentTarget)
console.log "$imgClicked:", $imgClicked
$div = $($imgClicked[0].parentElement.parentNode)
$screenshotsContainer = $(".screenshots-container")
$screenshotsList = $screenshotsContainer[0].childNodes
$otherScreenshots = $($screenshotsContainer[0].childNodes).not($div)
console.log "$otherScreenshots: ", $otherScreenshots
# Removes "current-screenshot" as class for all in array
$.each $screenshotsList, (index, value) ->
# changes class name of div
$value = $(value).removeClass("current-screenshot")
$div.toggleClass("current-screenshot")
if $div.hasClass("current-screenshot")
console.log "$div: ", $div
$div.animate
"height": "200px"
"width": "200px"
"paddingLeft": "280px"
.css
"position": "absolute"
"top": "0"
$.each $otherScreenshots, (index, value) ->
$(value).animate
"height": "100px"
"width": "100px"
"paddingLeft": "0"
"marginTop": "25px"
.css
"position" : "relative"
"marginTop":" 5px"